portfinder

portfinder

关注
发信
关注(28)粉丝(399)

Vue npm run serve 在随机端口上启动

本文介绍了Vue npm run serve 在随机端口上启动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

第一次尝试

无需任何额外配置即可运行 npm run serve

$ npm run serve>[email protected] 服务于/Users/ne/projects/vue-demo>vue-cli-service 服务信息正在启动开发服务器...正在启动类型检查服务...使用 1 个具有 2048MB 内存限制的 worker发出 CopyPlugin 后 98%DONE 在 4294ms 3:21:35 PM 内成功编译未发现类型错误版本:打字稿 3.5.3时间:4267ms应用程序运行于:- 本地:http://localhost:20415/- 网络:http://192.168.178.192:20415/请注意，开发版本未优化.要创建生产构建，请运行 npm run build.

所以首先我使用 lsof -i :8080 检查是否有另一个应用程序正在该端口上运行，但没有给出任何结果.

第二次尝试

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

第三次尝试

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

module.exports = {开发服务器:{打开:process.platform === '达尔文'，主机:'本地主机'，端口:8080，//在这里更改您的端口！https:假的，hotOnly:假，},};

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

15:25:20.889 :8080/sockjs-node/info?t=1566048320873:1 无法加载资源:net::ERR_CONNECTION_REFUSED15:25:20.910 客户端?81da:172 [WDS] 断开连接！关闭@客户端?81da:17215:25:21.982:8080/sockjs-node/info?t=1566048321978:1 无法加载资源:net::ERR_CONNECTION_REFUSED15:25:23.079:8080/sockjs-node/info?t=1566048323075:1 无法加载资源:net::ERR_CONNECTION_REFUSED15:25:25.097:8080/sockjs-node/info?t=1566048325091:1 无法加载资源:net::ERR_CONNECTION_REFUSED15:25:29.151 VM14:1 GET http://localhost:8080/sockjs-node/info?t=1566048329145 net::ERR_CONNECTION_REFUSED

package.json

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

{"name": "前端",版本":0.1.0"，私人":真的，脚本":{"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","test:unit": "vue-cli-service 测试:unit"},依赖关系":{"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"},开发依赖":{"@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","打字稿": "^3.4.3","vue-template-compiler": "^2.6.10"}}

我错过了什么?

解决方案

注意:此问题特定于 node-portfinder v1.0.22.它在 v1.0.23 中得到解决，这是一个重新标记 v1.0.21.

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

尝试:

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

返回类似:

9567

即使 8080 端口可用.

最近在这个norelrefern2c156ac31edr>norelern2.在端口尝试从 basePort 增加到最高端口之前.它随 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 ||默认端口portfinder.highestPort = portfinder.basePort + 1const port = await portfinder.getPortPromise()

选项 2:在行为改变之前安装 portfinder

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

npm install [email protected]

I'm trying to run Vue on port 8080, but can't get that to work. I just created a brand new project with vue create . and ran it with npm run serve, which starts the app on a random port.

First attempt

Run npm run serve without any additional configuration

$ npm run serve

> [email protected] 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.

So first I checked to see if another app is running on that port with lsof -i :8080 but that gave no results.

Second attempt

So the second attempt was to force the port via the cli with npm run serve -- --port 8080, which still started the app on a random port, but no errors in the browser console.

Third attempt

Next I tried to configure the application in vue.config.js.

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

Which didn't work either and even throws an exception in the browser console:

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

I added package.json, since I might be missing something here.

{
  "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"
  }
}

What am I missing?

解决方案

Note: This issue is specific to node-portfinder v1.0.22. It was resolved in v1.0.23 that is a retag of v1.0.21.

This seems a feature in portfinder that used random series to allocate an available port.

Trying:

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

return something like:

Even if port 8080 is available.

The behaviour change recently in this commit. Before the port were try increasing from basePort to highestport. It comes with the release v1.0.22

Option1: Patching

In order to use the port 8080, I patched the file node_modules/@vue/cli-service/lib/commands/serve.js adding line 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()

Option2: Install portfinder previous to the behaviour change

Another way to workaround waiting for portfinder/vue-cli to choose a solution is to install old portfinder with :

npm install [email protected]

这篇关于Vue npm run serve 在随机端口上启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-09 12:59
Powered by LMLPHP ©2024 portfinder 0.043032