web-dev-qa-db-ja.com

vue-cliプロジェクトでポート番号を変更する方法

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

vue.jsvuejs2command-line-interface
52
salman

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ファイルがある場合はそこから設定する方が良い

15
samayo

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

npm run serve -- --port 3000

次に、http://localhost:3000/にアクセスします

62
Nick Litwin

パーティーに遅れましたが、これらのすべての答えをすべてのオプションの概要をまとめたものにまとめると役立つと思います。

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ファイル、より具体的なenvは、より具体的でない環境をオーバーライドします。 PORT=3242
  • vue.config.js、devServer.port、例： devServer: { port: 9999 }

参照：

Vue CLI v2（非推奨）

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

参照：

50
wwerner

この回答の執筆時点（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 セクション。

30
TomyJaya

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を再配置します。あなたはそれを得ることができます。

7
aircraft

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

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

スクリプトを使用して構成する：

npm run serve --port 3000

うまく動作しますが、もっと多くの設定オプションがあれば、設定ファイルでそれをするのが好きです。詳細は docs で見つけることができます。

4
derFBeste

最良の方法は、package.jsonファイルのserveスクリプトコマンドを更新することです。 --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"
},
4
Julien Le Coupanec

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

PORT=3000

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

1
Chris Dickson

Visual Studioコードの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    
         }
}
0
Terje Solem

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

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