Vue-cliプロジェクトのポート番号を変更して、8080ではなく別のポートで実行されるようにする方法。

Vue-cli webpackテンプレートのポートは、アプリのルートにありますmyApp/config/index.js。

ブロックport内の値を変更するだけですdev。

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

これで、アプリにアクセスできます localhost:4545

また.env、そこから設定する方が良いファイルがある場合

vue-cli3.x を使用している場合は、npm次のようにポートをコマンドに渡すだけです。

npm run serve -- --port 3000

次に訪問 http://localhost:3000/

パーティーには遅れますが、これらすべての答えを1つのオプションにまとめて1つにまとめることは有益だと思います。

Vue CLI v2（webpackテンプレート）とVue CLI v3に分かれており、優先順位（高から低）で並べられています。

Vue CLI v3

• package.json：serveスクリプトにポートオプションを追加します。scripts.serve=vue-cli-service serve --port 4000
• CLIオプション--portにnpm run serve、例えばnpm run serve -- --port 3000。に注意してください--。これにより、ポートオプションがnpm自体ではなくnpmスクリプトに渡されます。少なくともv3.4.1以降なので、たとえばにする必要がありますvue-cli-service serve --port 3000。
• 環境変数$PORT、例えばPORT=3000 npm run serve
• .env ファイル、より具体的な環境は、それほど具体的ではないものをオーバーライドします。例： PORT=3242
• vue.config.js、devServer.port例えば、devServer: { port: 9999 }

参照：

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2（非推奨）

• 環境変数$PORT、例えばPORT=3000 npm run dev
• /config/index.js： dev.port

参照：

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

この回答の執筆時点（2018年5月5日）で、vue-cliその構成はでホストされています<your_project_root>/vue.config.js。ポートを変更するには、以下を参照してください：

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

完全なvue.config.jsリファレンスはここにあります：https : //cli.vuejs.org/config/#global-cli-config

ドキュメントに記載されているように、「webpack-dev-serverのすべてのオプション」（https://webpack.js.org/configuration/dev-server/）は、devServerセクション内で使用できます。

vue cli 3を使用している場合の別のオプションは、構成ファイルを使用することです。をvue.config.jsと同じレベルにしてpackage.json、次のように構成を配置します。

module.exports = {
  devServer: {
    port: 3000
  }
}

スクリプトで構成する：

npm run serve --port 3000

うまく機能しますが、より多くの構成オプションがある場合は、構成ファイルで実行するのが好きです。詳細については、ドキュメントをご覧ください。

最善の方法は、package.jsonファイルのserve scriptコマンドを更新することです。次の--port 3000ように追加するだけです：

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},

でwebpack.config.js：

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

module.exports-> devServer->でポートを変更できますport。

次に、を再構成しnpm run devます。あなたはそれを得ることができます。

localhostポートを変更する場合は、package.jsonのスクリプトタグを変更できます。

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

vue-cliバージョン3 の別のアプローチは、コンテンツ.envとともにルートプロジェクトディレクトリに（と一緒にpackage.json）ファイルを追加することです。

PORT=3000

実行中npm run serveは、アプリがポート3000で実行されていることを示します。

ここではバージョンごとにさまざまな答えがあります。VueCLIを使用する場合は、 2018年10月から上記のJulien Le Coupanecの答えを確認して説明すると思います。-このポストのようVue.jsの最新バージョンではvue@2.6.10 -以下の手順は、この記事では無数の回答の一部を見た後、私にはほとんど意味を成していました。Vue.jsドキュメントの参照、このパズルのピースを、が、かなり明確なようではありません。

1. package.jsonVue.jsプロジェクトのルートディレクトリにあるファイルを開きます。
2. package.jsonファイルで「ポート」を検索します。

3. 次の「ポート」への参照を見つけたら、以下にserve示すのと同じ構文を使用して、目的のポートを反映するようにスクリプト要素を編集します。

   "scripts": {
     "serve": "vue-cli-service serve --port 8000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   }
   

4. npm不必要な狂気を避けるために、サーバーを再起動してください。

ドキュメントは--port 8080、npm run serve次のようにコマンドの最後に追加することで同じ結果を効果的に得ることができることを示しています：npm run serve --port 8080。私はpackage.json余分な入力を避けるために直接編集することを好みましたが、npm run serve --port 1234インライン編集は一部にとって便利かもしれません。

次のスクリプトにPORT環境変数を追加します。servepackage.json

"serve": "PORT=4767 vue-cli-service serve",

何てことだ！それほど複雑ではなく、これらの答えも機能します。ただし、この質問の他の回答も有効です。

あなたが本当に使用したい場合はvue-cli-service、あなたの中のポートの設定を持つようにしたい場合はpackage.jsonあなたの「VUE作成<アプリケーション名>」コマンドは基本的に作成したファイル、は、次の設定を使用することができます--port 3000。したがって、スクリプトの構成全体は次のようになります。

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

@vue/cli 4.3.1 (vue --version)macOSデバイスで使用しています。

vue-cli-serviceリファレンスも追加しました：https : //cli.vuejs.org/guide/cli-service.html

ビジュアルスタジオコードのvueプロジェクトでは、これを/config/index.jsに設定する必要がありました。次のように変更します。

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}

node_modules/@vue/cli-service/lib/options.jsに移動します
。「devServer」内の下部にあるコードのブロックを解除します
。次に、「port」に目的のポート番号を指定します。

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}