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


当前回答

进入“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 => {}
}

其他回答

第一选择:

打开的包。在“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服务——端口8090

我的天啊!这并不复杂,这些答案也同样有效。然而,这个问题的其他答案也很有效。

如果你真的想使用vue-cli-service,如果你想在你的包中有端口设置。你的'vue create <app-name>'命令基本上创建的Json文件,你可以使用以下配置:所以你脚本的整个配置是这样的:

...
"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

将PORT环境变量添加到package.json中的服务脚本中:

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

虽然有点晚了,但我认为将所有这些答案整合成一个概述所有选项的答案是有帮助的。

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

Vue CLI v3

package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000 CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000. Environment Variable $PORT, e.g. PORT=3000 npm run serve .env Files, more specific envs override less specific ones, e.g. PORT=3242 vue.config.js, devServer.port, e.g. 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 / 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

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

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