【问题标题】：How to change port number in vue-cli project如何在 vue-cli 项目中更改端口号
【发布时间】：2018-04-23 12:11:25
【问题描述】：

如何更改 Vue-cli 项目中的端口号，使其在另一个端口而不是 8080 上运行。

【问题讨论】：

在macOS上，请记住这个stackoverflow.com/a/46813423/13762066

标签： javascript vue.js vuejs2 command-line-interface vue-cli

【解决方案1】：

Vue-cli webpack 模板的端口位于应用根目录的myApp/config/index.js。

您所要做的就是修改dev 块内的port 值：

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

现在您可以通过localhost:4545 访问您的应用程序

如果你有 .env 文件最好从那里设置它

【讨论】：

在最新的 vuejs 版本中。该文件不再使用，而是使用：/vue.config.js.
文件myApp/config/index.js不存在！
Vue CLI 3 在项目根目录使用 vue.config.js。它必须手动创建 IIRC。
那里没有 vue.config.js
"scripts": { "serve": "vue-cli-service serve --port 80" },

【解决方案2】：

在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。你可以得到那个。

【讨论】：

【解决方案3】：

截至撰写此答案时（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 部分中可用。

【讨论】：

@srf：答案已编辑。感谢您指出损坏的链接。
一定是\。对该网站的影响:)

【解决方案4】：

如果您使用的是vue-cli 3.x，您可以简单地将端口传递给npm 命令，如下所示：

npm run serve -- --port 3000

然后访问http://localhost:3000/

【讨论】：

您节省了我宝贵的时间，因为第一个 -- 没有写在文档中：cli.vuejs.org/guide/cli-service.html#using-the-binary。我正在输入npm run serve --port 3000，这对我来说似乎是合乎逻辑的，但我遇到了错误......竖起大拇指！
那是因为第一个-- 转义了给npm run serve 和not 给vue-cli-service 的参数。如果您直接编辑package.json 和serve 命令，则按文档所示输入："serve": "vue-cli-service serve --port 3000",

【解决方案5】：

如果您使用 vue cli 3，另一个选择是使用配置文件。将vue.config.js 与package.json 设置在同一级别，然后进行如下配置：

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

用脚本配置它：

npm run serve --port 3000

效果很好，但如果您有更多配置选项，我喜欢在配置文件中进行。您可以在docs 中找到更多信息。

【讨论】：

我喜欢这个答案，因为它表明 vue.config.js 可用于更改端口，而其他所有内容保持原样，这是最初要求的。

【解决方案6】：

vue-cli 版本 3 的另一种方法是在根项目目录中添加一个 .env 文件（在 package.json 旁边），其中包含以下内容：

PORT=3000

运行 npm run serve 现在将指示应用程序正在端口 3000 上运行。

【讨论】：

【解决方案7】：

最好的方法是更新 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"
},

【讨论】：

【解决方案8】：

聚会迟到了，但我认为将所有这些答案合并为一个概述所有选项的答案会很有帮助。

在 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 }

参考文献：

Vue CLI v2（已弃用）

环境变量$PORT，例如PORT=3000 npm run dev
/config/index.js: dev.port

参考资料：

【讨论】：

看起来这改变了最新的 vue cli（使用 3.4.1），这是我在 package.json 中的“服务”行："serve": "vue-cli-service serve --port 4000",。效果很好！
@RoccoB 谢谢，我已验证并将其添加到答案中。
目前上述答案似乎不适用于 v3。我尝试了 .env 选项、package.json、vue.config.js 和 CLI 命令选项，但它们都被忽略了。配置文件文档说“某些值，如 host、port 和 https 可能会被命令行标志覆盖。” cli.vuejs.org/config/#devserver我错过了什么吗？其他人有问题吗？
@Ryan - 这是昨天在 VueJS CLI 存储库问题中报告的：github.com/vuejs/vue-cli/issues/4452 据说要安装 portfinder (github.com/http-party/node-portfinder)，因为发生了重大变化。

【解决方案9】：

在 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    
         }
}

【讨论】：

我几乎也是这样做的。我的文件名为“vue.config.js”，位于 vue 项目的根目录。所需端口位于路径 module.exports.dev.port 上。这里设置为 8090。其他键值对不是必需的（对我来说）。这是从开发模式下的“npm run serve”开始的！

【解决方案10】：

在package.json 中将PORT 环境变量添加到您的serve 脚本：

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

【讨论】：

【解决方案11】：

这里有很多答案因版本而异，所以我想我会在 2018 年 10 月 使用 Vue CLI 时确认并解释上面 Julien Le Coupanec 的答案。在这篇文章的最新版本的 Vue.js 中 - vue@2.6.10 - 在查看了这篇文章中的一些无数答案后，下面概述的步骤对我来说是最有意义的。 Vue.js documentation 引用了这个难题的一部分，但并不那么明确。

打开Vue.js项目根目录下的package.json文件。
在package.json 文件中搜索“端口”。

在找到以下对“端口”的引用后，编辑 serve 脚本元素以反映所需的端口，使用如下所示的相同语法：

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

确保重新启动npm 服务器以避免不必要的疯狂。

文档显示，通过将--port 8080 添加到npm run serve 命令的末尾可以有效地获得相同的结果，如下所示：npm run serve --port 8080。我更喜欢直接编辑 package.json 以避免额外输入，但编辑 npm run serve --port 1234 内联可能对某些人来说会派上用场。

【讨论】：

【解决方案12】：

转到 node_modules/@vue/cli-service/lib/options.js
在“devServer”的底部，解锁代码
现在在“端口”中提供您想要的端口号:)

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 => {}
}

【讨论】：

转到 node_modules/@vue/cli-service ... ?这不会在 npm 更新时被覆盖吗？

【解决方案13】：

如果你想改变localhost端口，你可以改变package.json中的scripts标签：

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

【讨论】：

【解决方案14】：

天哪！它并没有那么复杂，这些答案也有效。但是，这个问题的其他答案也很有效。

如果你真的想使用vue-cli-service 并且如果你想在你的package.json 文件中设置端口，你的'vue create ' 命令基本上是创建的，你可以使用以下配置：--port 3000。所以你的脚本的整个配置是这样的：

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

我在 macOS 设备上使用@vue/cli 4.3.1 (vue --version)。

我还添加了 vue-cli-service 参考： https://cli.vuejs.org/guide/cli-service.html

【讨论】：

这个答案在这个页面上重复了一个 3 年前的答案：stackoverflow.com/a/60727863/401467

【解决方案15】：

第一个选项：

打开 package.json 并在 "serve" 部分添加 "--port port-no"。

就像下面一样，我已经做到了。

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

第二个选项：如果你想通过命令提示符

npm run serve --port 8090

【讨论】：

【解决方案16】：

要更改端口 (NPM)，请转到 package.json。在scripts写自己的脚本，例如：

"start": "npm run serve --port [PORT YOU WANT]"

之后你可以从npm start开始

【讨论】：

请对您的回答进行详细的解释，以便下一个用户更好地理解您的回答。此外，请提供链接内容的基本介绍，以防将来停止工作。

【解决方案17】：

如果您使用 yarn：

yarn serve --port 3000

【讨论】：