如何在 vue-cli 项目中更改端口号Vue CLI v3Vue CLI v2 (deprecated)

2022-08-30 01:26:05

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


答案 1

如果您使用的是 3.x,则只需将端口传递给命令,如下所示:vue-clinpm

npm run serve -- --port 3000

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


答案 2

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

在 Vue CLI v2(webpack 模板)和 Vue CLI v3 中分离,按优先级排序(从高到低)。

Vue CLI v3

  • package.json:将端口选项添加到脚本:servescripts.serve=vue-cli-service serve --port 4000
  • CLI 选项为 ,例如 .请注意,这会将 port 选项传递给 npm 脚本,而不是 npm 本身。由于至少 v3.4.1,它应该是例如 .--portnpm run servenpm run serve -- --port 3000--vue-cli-service serve --port 3000
  • 环境变量,例如$PORTPORT=3000 npm run serve
  • .env文件,更具体的 env 会覆盖不太具体的 env,例如PORT=3242
  • vue.config.js、,例如devServer.portdevServer: { port: 9999 }

引用:

Vue CLI v2 (deprecated)

  • 环境变量,例如$PORTPORT=3000 npm run dev
  • /config/index.js:dev.port

引用: