如何在vue-cli项目中更改端口号

Question

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

- salman

---

在 macOS 上，请记住这个 https://dev59.com/i6Dia4cB1Zd3GeqPJtHu#46813423 - Pawel Ka

Answer 1

如果你正在使用vue-cli 3.x版本，你可以通过像下面这样的命令将端口号传递给npm：

npm run serve -- --port 3000

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

- Nick Litwin

---

你为我节省了宝贵的时间，因为文档中没有写明第一个 -- ：https://cli.vuejs.org/guide/cli-service.html#using-the-binary。我一直在输入 npm run serve --port 3000，这在我看来是很合理的，但出现了错误... 点赞！ - toni07

这是因为第一个“--”转义了传递给“npm run serve”的参数，而不是“vue-cli-service”。如果你直接编辑“package.json”和“serve”命令，就像文档中所示："serve":"vue-cli-service serve --port 3000"。 - MatsLindh

虽然这个答案很好，而且得到了大多数赞同（包括我的;)), 但我更喜欢在package.json中进行更改，以便不必每次都给出端口，而是在npm run serve命令中自动持久化。 - gluttony

Answer 2

虽然来晚了，但我认为将所有答案整合成一个会更有帮助。

按照优先级（从高到低），分为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 }

参考资料：

• 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

- wwerner

---

最新版本的vue cli（使用3.4.1）似乎有一点变化，这是我在package.json中的“serve”行："serve": "vue-cli-service serve --port 4000"。 运行得很好！ - RoccoB

@RoccoB 谢谢，我已经验证过并将其添加到答案中。 - wwerner

以上的答案在当前的v3版本似乎不起作用。我尝试了 .env 选项、package.json、vue.config.js 和 CLI 命令选项，但它们都被忽略了。配置文件文档中说：“一些像 host、port 和 https 的值可能会被命令行标志覆盖。” https://cli.vuejs.org/config/#devserver 我有什么遗漏的吗？还有其他人有这个问题吗？ - Ryan

@Ryan - 这个问题昨天在VueJS CLI存储库问题中报告：https://github.com/vuejs/vue-cli/issues/4452它建议安装portfinder（https://github.com/http-party/node-portfinder/），因为发生了一个重大变化。 - Angelo

@RoccoB 这在我的情况下也起作用了。感谢 wwerner 的回复。 - A. Dzebo

Answer 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部分中使用。

- TomyJaya

Answer 4

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 文件，最好从那里设置它

- samayo

---

在最新的Vue.js版本中，不再使用该文件，而是使用：<your_project_root>/vue.config.js。 - Jianwu Chen

文件 myApp/config/index.js 不存在！ - exhuma

Vue CLI 3 使用位于项目根目录下的 vue.config.js，需要手动创建（如果我没记错的话）。 - Ege Ersoz

没有 vue.config.js 文件。 - Geomorillo

"scripts": { "serve": "vue-cli-service serve --port 80" },翻译为："scripts": { "serve": "vue-cli-service serve --port 80" },（注：这是一段计算机代码，指定了使用“vue-cli-service”工具来启动一个服务，并将端口设置为80。） - Sudhir K Gupta

Answer 5

如果您使用的是vue cli 3，则另一种选择是使用配置文件。在与package.json相同级别的位置创建vue.config.js文件，并放置以下配置：

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

使用脚本进行配置：

npm run serve --port 3000

功能很强大，但如果你有更多的配置选项，我喜欢在配置文件中设置。你可以在文档中找到更多信息。

- derFBeste

---

我喜欢这个答案，因为它表明可以使用vue.config.js仅更改端口并将其他所有内容保持不变，这正是最初所要求的。 - Twisted

Answer 6

最好的方法是在您的 package.json 文件中更新服务器脚本命令。只需像这样添加 --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"
},

- Julien Le Coupanec

Answer 7

第一个选项:

打开 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

- Prasenjit Mahato

Answer 8

如果你想改变本地主机端口，可以在package.json中更改脚本标签：

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

- Fatih Başar

Answer 9

在 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。您就可以得到它了。

- aircraft

Answer 10

哦，天啊！这并不是那么复杂的事情，以下这些答案同样有效。不过，对于这个问题的其他回答也很好。

如果你真的想使用 vue-cli-service，并且想在你的 package.json 文件中设置端口号，即你的“vue create <app-name>”命令基本上创建的文件，你可以使用以下配置：--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

- Ebrahim

---

此答案与3年前此页面上的一个答案重复：https://dev59.com/QFYN5IYBdhLWcg3wlY97#60727863 - datashaman