最好的方法是更新包中的serve脚本命令。json文件。只需像这样追加——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"
},

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

运行服务-- --端口3000

然后访问http://localhost: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可能对一些人有用。

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

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

在webpack.config.js中:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

您可以在模块中更改端口。exports -> devServer ->端口。

然后你重新启动npm run dev。你可以得到那个。

如果您正在使用vue cli 3，另一个选择是使用配置文件。创建vue.config.js与你的包在同一级别。Json，并像这样放置配置:

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

使用脚本配置:

npm run serve --port 3000

工作很好，但如果你有更多的配置选项，我喜欢在配置文件中做。你可以在文档中找到更多信息。