Vue npm运行服务从随机端口开始

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但是没有结果。

第二次尝试

因此，第二个尝试是通过cli通过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

package.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可用。

该提交中的行为最近发生了变化。在尝试将端口从basePort增加到highport之前。它随版本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()

我将此PR提交给vue-cli。

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

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

npm install portfinder@1.0.21

选项3：等待下一个Portfinder发布

有一个待处理的请求将默认行为恢复为顺序 https://github.com/http-party/node-portfinder/pull/86。