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

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

npm run serve -- --port 3000

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

---

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

在 Vue CLI v2（webpack 模板）和 Vue CLI v3 中分开，按优先级排序（从高到低）。

Vue CLI v3

package.json：为服务脚本添加端口选项：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, eg 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 webpack 模板的端口位于应用根目录的 myApp/config/index.js 中。

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

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

现在您可以使用 localhost:4545 访问您的应用

另外，如果您有 .env 文件，最好从那里设置它

---

如果您使用 vue cli 3，另一个选择是使用配置文件。创建一个与 package.json 相同级别的 vue.config.js 并进行如下配置：

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

使用脚本对其进行配置：

npm run serve --port 3000

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

---

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

---

第一个选项：

打开 package.json 并在“服务”部分添加“--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

---

如果要更改 localhost 端口，可以更改 package.json 中的脚本标签：

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "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。你可以得到那个。

---

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

如果您真的想使用 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"
},
...

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

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

---

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

PORT=3000

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

---

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

打开 Vue.js 项目根目录下的 package.json 文件。在 package.json 文件中搜索“端口”。找到以下对“port”的引用后，编辑 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 内联可能会派上用场。

---

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

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

之后，您可以从 npm start 开始

https://i.stack.imgur.com/NBNIy.png

---

如果您使用 yarn：

yarn serve --port 3000

---

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

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

---

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

---

如果要临时更改端口号，可以在 npm run serve 命令中添加 –port 选项。

npm 运行服务 -- --port 6058

---

打开 package.json 添加名为 serve 的脚本，“serve”：“Vue-cli-service serve --port 8081” npm run serve 你将运行服务器 8081

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

---

你应该对此很好：

"serve": "vue-cli-service 服务 --port 8081",

---

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

---