我正在尝试在端口 8080 上运行 Vue，但无法使其工作。我刚刚创建了一个全新的项目vue create .并运行它npm run serve，这会在随机端口上启动应用程序。

第一次尝试

运行 npm runserve 无需任何额外配置

$ npm run serve

> [email protected] /cdn-cgi/l/email-protection serve /Users/ne/projects/vue-demo
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 4294ms                                                                                                              3:21:35 PM

No type errors found
Version: typescript 3.5.3
Time: 4267ms

  App running at:
  - Local:   http://localhost:20415/
  - Network: http://192.168.178.192:20415/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

因此，首先我检查该端口上是否有另一个应用程序正在运行lsof -i :8080但这没有结果。

第二次尝试

所以第二次尝试是通过 cli 强制端口npm run serve -- --port 8080，它仍然在随机端口上启动应用程序，但浏览器控制台中没有错误。

第三次尝试

接下来我尝试在中配置应用程序vue.config.js.

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: 'localhost',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
};

这也不起作用，甚至在浏览器控制台中抛出异常：

15:25:20.889 :8080/sockjs-node/info?t=1566048320873:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:20.910 client?81da:172 [WDS] Disconnected!
close @ client?81da:172
15:25:21.982 :8080/sockjs-node/info?t=1566048321978:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:23.079 :8080/sockjs-node/info?t=1566048323075:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:25.097 :8080/sockjs-node/info?t=1566048325091:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
15:25:29.151 VM14:1 GET http://localhost:8080/sockjs-node/info?t=1566048329145 net::ERR_CONNECTION_REFUSED

包.json

我添加了 package.json，因为我可能在这里遗漏了一些东西。

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-plugin-eslint": "^3.10.0",
    "@vue/cli-plugin-typescript": "^3.10.0",
    "@vue/cli-plugin-unit-jest": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }
}

我缺少什么？

注意：此问题特定于node-portfinderv1.0.22 https://github.com/http-party/node-portfinder/releases/tag/v1.0.22。已解决v1.0.23 https://github.com/http-party/node-portfinder/releases/tag/v1.0.23这是 v1.0.21 的重新标记。

这似乎是 portfinder 中的一个功能，它使用随机序列来分配可用端口。

Trying:

const portfinder = require('portfinder');
portfinder.basePort=8080
portfinder.getPortPromise().then((port) => { console.log(port) })

返回类似：

9567

即使端口 8080 可用。

最近的行为发生了变化commit https://github.com/http-party/node-portfinder/commit/eeeaba108cbb63b7934e7e0837b024698e0344ce#diff-8a54d09b8f24635c2b2cc156ac31ed21。在端口尝试从基本端口增加到最高端口之前。它随版本一起提供v1.0.22 https://github.com/http-party/node-portfinder/releases/tag/v1.0.22

选项1：打补丁

为了使用8080端口，我修补了该文件node_modules/@vue/cli-service/lib/commands/serve.js添加第 322 行portfinder.highestPort = portfinder.basePort + 1

portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
portfinder.highestPort  = portfinder.basePort + 1
const port = await portfinder.getPortPromise()

选项 2：在行为更改之前安装 portfinder

等待 portfinder/vue-cli 选择解决方案的另一种解决方法是安装旧的 portfinder：

npm install [email protected] /cdn-cgi/l/email-protection