我正在try 在8080端口上运行Vue,但无法运行.我刚刚用vue create .创建了一个全新的项目,用npm run serve运行它,它在一个随机端口上启动应用程序.

First attempt

运行npm运行服务,无需任何额外配置

$ 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运行,但没有给出结果.

Second attempt

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

Third attempt

接下来,我try 在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"
  }
}

我错过了什么?

推荐答案

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

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

try :

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

返回如下内容:

9567

即使端口8080可用.

最近,这commit个国家的行为发生了变化.在端口之前,我们try 从基本端口增加到最高端口.它与v1.0.22版一起发布

Option1: Patching

为了使用端口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()

Option2: Install portfinder previous to the behaviour change

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

npm install portfinder@1.0.21

Vue.js相关问答推荐

vuejs:在确认提示之前更改 HTML

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

如果似乎没有明确使用输入事件,那么发出输入事件有什么作用?

在 Vuejs 中更新 Chartjs 图表数据集

VueJS3 - 在 for 循环中获取元素的句柄

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

vue 计算的 ant watch 不会在嵌套属性更改时触发

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试?

带有热重载的 docker 容器上的 Vue.js 应用程序

为什么在 Vue.js 中使用 `var` 关键字?

如何使用 v-on:change 将输入文本传递给我的 vue 方法?

为什么组件在 v-if 下没有被销毁

在 Vue 中,如何使用 npm run build 将 .htaccess 包含到生产环境中?

apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面

请求正在进行时显示加载器

如何克隆props对象并使其无react

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

vue 在 v-model 之后执行 @click

我可以使用react路由创建别名路由吗?

Vue.js 显示空格(换行符)