Vue Npm Run подача запускается на случайном порту

Я пытаюсь запустить Vue через порт 8080, но не могу заставить это работать. Я только что создал новый проект с vue create . и запустил его с npm run serve, который запускает приложение на случайном порте.

Первая попытка

Запустите npm, запустите подачу без дополнительной настройки

$ 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.

Итак, сначала я проверил, запущено ли на этом порту другое приложение с lsof -i :8080, но это не дало результатов.

Вторая попытка

Поэтому вторая попытка состояла в том, чтобы принудительно настроить порт через клиентскую систему с 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"
  }
}

Чего мне не хватает?

Ответ 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 [email protected]

Вариант 3: ожидание следующего выпуска портфиндера

Существует ожидающий запрос на извлечение, чтобы вернуть поведение по умолчанию к последовательному https://github.com/http-party/node-portfinder/pull/86.

Ответ 2

Вы можете временно откатить портфиндер, поместив

"resolutions": {
  "@vue/cli-service/portfinder": "1.0.21"
}

в своем файле package.json и запустите yarn install впоследствии.

Ответ 3

В большинстве случаев ошибка возникала, когда что-то работает на том же порту. Но, как вы упомянули выше, вы проверили его, и на нем ничего нет.

Пытались ли вы перезагрузить или завершить работу своей системы и снова запустить сервер, если не попробуете, какое-то время он работал для меня.

Во-вторых, будет полезно, если вы поделитесь объектом Scripts в package.json.

Я рассмотрел вашу проблему и обнаружил, что эта статья может помочь вам. Дайте мне знать, если ошибка все еще существует.