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


当前回答

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

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

其他回答

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

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

之后你可以用npm start开始

这里有很多不同版本的答案,所以我想我应该在2018年10月使用Vue CLI时确认并阐述Julien Le Coupanec的答案。在Vue.js的最新版本(vue@2.6.10)中,在浏览了这篇文章中无数的答案后,下面概述的步骤对我来说最有意义。Vue.js文档引用了这个难题的各个部分,但不是很明确。

打开包裹。Vue.js项目根目录下的Vue.js文件。 在包中搜索“port”。json文件。 在找到以下对“port”的引用后,使用如下所示的相同语法,编辑serve脚本元素以反映所需的端口: "脚本":{ “serve”:“vue-cli-service serve—port 8000”, "build": "vue-cli-service build", "lint": "vue-cli-service lint" } 确保重新启动npm服务器以避免不必要的疯狂。

文档显示,通过在npm run serve命令的末尾添加——port 8080,可以有效地得到相同的结果,如下所示:我更喜欢编辑这个包。直接编辑NPM run serve——port 1234以避免额外的输入,但是内联编辑NPM run serve——port 1234可能对一些人有用。

vue-cli版本3的另一种方法是在根项目目录中添加一个.env文件(与package.json一起),内容如下:

端口= 3000

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

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

Vue-cli webpack模板的端口在你的应用根目录myApp/config/index.js中。

你所要做的就是在dev块中修改端口值:

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

现在你可以用localhost:4545访问你的应用了

如果你有。env文件,最好从那里设置