问题描述
我正在尝试在端口 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 在随机端口上启动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!