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


当前回答

如果您使用vue-cli 3。X,你可以简单地将端口传递给NPM命令,如下所示:

运行服务-- --端口3000

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

其他回答

如果你通过Visual Studio Community或Professional(可能是. net Core项目)运行这个程序,你会发现无论你执行什么步骤,当你启动解决方案时,它都会使用8080。

有发射。Json文件,你需要编辑隐藏在.vscode目录。 MS根本没有告诉你这个,文件搜索似乎也找不到它。

如果你使用纱线:

yarn serve --port 3000

这里有很多不同版本的答案,所以我想我应该在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上运行。

打开package.json 添加名为serve的脚本,"serve": "Vue-cli-service serve -port 8081" NPM运行服务 服务器将运行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"
  }
}