vue.js - Vue npm run serve 在随机端口启动

Question

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

第一次尝试

在没有任何额外配置的情况下运行 npm run serve

$ npm run serve

> vue-demo@0.1.0 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 检查是否有另一个应用程序正在该端口上运行，但没有给出任何结果。

第二次尝试

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

第三次尝试

接下来我尝试在 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"
  }
}

我错过了什么？

Answer 1

注意:此问题特定于 node-portfinder v1.0.22 .它已在 v1.0.23 中解决这是 v1.0.21 的重新标记。

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

尝试:

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

返回类似的东西:

9567

即使端口 8080 可用。

此 commit 最近的行为发生了变化.在端口尝试从 basePort 增加到 highestport 之前。它随版本一起发布 v1.0.22

选项 1:打补丁

为了使用端口 8080，我修补了文件 node_modules/@vue/cli-service/lib/commands/serve.js 添加行 322 portfinder.highestPort = portfinder。基础端口 + 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 portfinder@1.0.21