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

Question

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

Answer 1

如果您使用的是vue-cli3.x,则只需将端口传递给npm命令即可:

npm run serve -- --port 3000

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

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 文件,更具体的环境覆盖不太具体的环境,例如 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

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节中提供.

Answer 4

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

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

Answer 5

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

Answer 6

第一个选项：

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

Answer 7

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

如果你真的想使用的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

Answer 8

如果您使用的是vue cli 3，则另一个选择是使用配置文件。做一个vue.config.js在同一水平作为你的package.json，把一个配置，如下所示：

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

使用脚本进行配置：

npm run serve --port 3000

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

Answer 9

如果您使用yarn：

yarn serve --port 3000

Answer 10

1. 打开package.json
2. 添加名为 的脚本serve，"serve": "Vue-cli-service serve --port 8081"
3. 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"
  }
}

Answer 11

在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.你可以得到它.

Answer 12

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

PORT=3000

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

Answer 13

这里有很多答案因版本而异，所以我想我会在 2018 年 10 月使用 Vue CLI 时确认并阐述上面 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内联编辑可能对某些人有用。

Answer 14

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

Answer 15

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

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

之后你可以开始npm start