Як змінити номер порту в проекті vue-cli


Відповіді:


20

Порт шаблону веб-пакету Vue-cli знаходиться в корені програми myApp/config/index.js.

Все, що вам потрібно зробити - це змінити portзначення всередині devблоку:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

Тепер ви можете отримати доступ до своєї програми за допомогою localhost:4545

також якщо у вас є .envфайл, краще встановити його звідти


18
В останній версії vuejs. Файл більше не використовується, замість цього використовується: <your_project_root> /vue.config.js.
Jianwu Chen

3
Файл myApp/config/index.jsне існує!
ексгума

3
Vue CLI 3 використовує vue.config.js в корені проекту. Він повинен бути створений вручну IIRC.
Еге Ерсоз

1
там немає vue.config.js
Геоморілло

19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta

124

Якщо ви використовуєте vue-cli3.x, ви можете просто передати порт npmкоманді так:

npm run serve -- --port 3000

Потім відвідайте http://localhost:3000/


7
Ви заощадили мені дорогоцінний час, оскільки перший --не написано в документі: cli.vuejs.org/guide/cli-service.html#using-the-binary . Я npm run serve --port 3000набирав текст, який мені здається логічним, але у мене виникли помилки ... Великі пальці!
toni07

3
Це тому , що перші --паростки параметри дано npm run serveі НЕ в vue-cli-service. Якщо ви редагуєте package.jsonта serveкоманду безпосередньо, ви вводите її, як показано в документації:"serve": "vue-cli-service serve --port 3000",
MatsLindh

93

Пізно до вечірки, але я вважаю, що корисно об'єднати всі ці відповіді в одне, у якому викладені всі варіанти.

Розділено на Vue CLI v2 (шаблон веб-пакета) та Vue CLI v3, упорядкований за пріоритетом (від високого до низького).

Vue CLI v3

  • package.json: Додати параметр порту в serveсценарій:scripts.serve=vue-cli-service serve --port 4000
  • CLI Варіант --portдля npm run serve, наприклад npm run serve -- --port 3000. Зауважте --, що це робить параметр порту передає сценарій npm замість самого npm. Так як принаймні v3.4.1, це повинно бути, наприклад vue-cli-service serve --port 3000.
  • Змінна середовище $PORT, наприкладPORT=3000 npm run serve
  • .env Файли, більш конкретні envs замінюють менш конкретні, наприклад PORT=3242
  • vue.config.js, devServer.port, Наприклад ,devServer: { port: 9999 }

Список літератури:

Vue CLI v2 (застарілий)

  • Змінна середовище $PORT, наприкладPORT=3000 npm run dev
  • /config/index.js: dev.port

Список літератури:


3
Схоже, це змінило tad в останньому vue cli (використовуючи 3.4.1), ось мій рядок "служити" в package.json : "serve": "vue-cli-service serve --port 4000",. Чудово працює!
RoccoB

@RoccoB Дякую, я перевірив це та додав до відповіді.
wwerner

На сьогоднішній день відповіді, схоже, не працюють у версії 3. Я спробував параметр .env, package.json, vue.config.js та команду CLI, але всі вони ігноруються. Документи конфігураційного файлу кажуть: "Деякі значення, такі як host, portі httpsможуть бути перезаписані прапорами командного рядка." cli.vuejs.org/config/#devserver Я щось пропускаю? Хтось ще має проблеми?
Райан

2
@Ryan - Про це повідомлялося вчора у випуску репозиторію VueJS CLI: github.com/vuejs/vue-cli/isissue/4452 Кажуть, щоб встановити portfinder ( github.com/http-party/node-portfinder ), оскільки був порушення змін, що сталися з цим.
Анджело

38

На момент написання цієї відповіді (5 травня 2018 р.) Розміщена vue-cliїї конфігурація <your_project_root>/vue.config.js. Щоб змінити порт, див. Нижче:

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

Повну vue.config.jsінформацію можна знайти тут: https://cli.vuejs.org/config/#global-cli-config

Зауважте, що, як зазначено в документах, "Усі параметри для webpack-dev-сервера" ( https://webpack.js.org/configuration/dev-server/ ) доступні в devServerрозділі.


1
@srf: відповідь відредаговано. Дякуємо, що вказали на розірване посилання.
TomyJaya

Повинен бути \. ефект на цьому сайті :)
killjoy

12

Інший варіант, якщо ви використовуєте vue cli 3, - це використовувати файл конфігурації. Зробіть vue.config.jsна тому ж рівні, що і ваш, package.jsonі поставте такий конфігурацію:

module.exports = {
  devServer: {
    port: 3000
  }
}

Налаштування його за допомогою сценарію:

npm run serve --port 3000

відмінно працює, але якщо у вас є більше параметрів конфігурації, мені подобається робити це у конфігураційному файлі. Більше інформації ви можете знайти в документах .


1
Мені подобається ця відповідь, оскільки вона показує, що vue.config.js можна використовувати лише для того, щоб змінити порт і залишити все інше як - це те, про що запитали спочатку.
Скручений

9

Найкращий спосіб - оновити команду службового сценарію у вашому package.jsonфайлі. Просто додайте --port 3000так:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},

8

У webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

Ви можете змінити порт у module.exports-> devServer-> port.

Тоді ви відпочиваєте npm run dev. Ви можете це отримати.


8

Якщо ви хочете змінити порт localhost, ви можете змінити тег скриптів у package.json :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Дуже дякую :-)
Адам Орлов

5

Альтернативний підхід з vue-cliверсією 3 полягає в тому, щоб додати .envфайл до кореневого каталогу проекту (поряд із стороною package.json) із вмістом:

PORT=3000

Запуск npm run serveбуде вказувати, що програма працює на порту 3000.


4

Тут є багато відповідей, які залежать від версії, тому я подумав, що я підтверджу і поясню відповідь Жульєна Ле Купанека вище з жовтня 2018 року під час використання Vue CLI . В останній версії Vue.js станом на цій публікації - vue@2.6.10 - окреслені нижче кроки мали для мене найбільш сенс після перегляду деяких з безлічі відповідей у ​​цій публікації. Документація Vue.js посилається на фрагменти цієї головоломки, але не настільки явна.

  1. Відкрийте package.jsonфайл у кореневому каталозі проекту Vue.js.
  2. Шукайте "порт" у package.jsonфайлі.
  3. Знайшовши таке посилання на "порт", відредагуйте serveелемент сценарію, щоб відобразити потрібний порт, використовуючи той самий синтаксис, як показано нижче:

    "scripts": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. Не забудьте перезапустити npmсервер, щоб уникнути зайвих божевільних дій.

Шоу документації , що можна ефективно отримати той же результат, додавши --port 8080до кінця npm run serveкоманди , як так: npm run serve --port 8080. Я віддав перевагу редагуванню package.jsonбезпосередньо, щоб уникнути зайвих наборів тексту, але редагування npm run serve --port 1234вбудованого тексту може бути корисним для деяких.


1

Додайте PORTenvvariable до свого serveсценарію package.json:

"serve": "PORT=4767 vue-cli-service serve",

1

Боже мій! Це не так вже й складно, з цими відповідями теж працює. Однак інші відповіді на це питання також добре працюють.

Якщо ви дійсно хочете використовувати , vue-cli-serviceі якщо ви хочете мати настройку порту в вашому package.jsonфайл, який ваш «ві створити <додаток-ім'я>» команда в основному створює, ви можете використовувати наступну конфігурацію: --port 3000. Отже, вся конфігурація вашого сценарію буде такою:

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

Я використовую @vue/cli 4.3.1 (vue --version)на пристрої macOS.

Я також додав посилання на сервіс vue-cli: https://cli.vuejs.org/guide/cli-service.html


0

У своєму проекті Vue у коді візуальної студії я повинен був встановити це в /config/index.js . Змініть його в:

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}

0

Перейдіть до node_modules/@vue/cli-service/lib/options.js
У нижній частині всередині "devServer" розблокуйте коди.
Дайте потрібний номер порту у "порту" :)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}

3
перейти до node_modules / @ vue / cli-service ...? Хіба це не перезаписується при оновленні npm?
Joeri
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.