Как изменить номер порта в проекте vue-cli

Ответы:

21

Порт для шаблона веб-пакета 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. Файл больше не используется, вместо этого используется: <ваш_корень_проекта> /vue.config.js.
Jianwu Chen
4
Файл myApp/config/index.jsне существует!
exhuma 02
3
Vue CLI 3 использует vue.config.js в корне проекта. Он должен быть создан вручную IIRC.
Эге Эрсоз 03
2
там нет vue.config.js
Geomorillo 09
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta
127

Если вы используете 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
95

Поздно к вечеринке, но я думаю, что было бы полезно объединить все эти ответы в один, описывающий все варианты.

Разделено в 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

Ссылки:

Wwerner
источник
3
Похоже , это изменилось чуть в последнем вю кли (используя 3.4.1), вот моя «служить» линия в package.json: "serve": "vue-cli-service serve --port 4000",. Прекрасно работает!
RoccoB
@RoccoB Спасибо, я проверил и добавил в ответ.
wwerner 01
Приведенные выше ответы на данный момент не работают в версии 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/issues/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-server» ( https://webpack.js.org/configuration/dev-server/ ) доступны в devServerразделе.

ТомыДжая
источник
1
@srf: Ответ отредактирован. Спасибо, что указали на неработающую ссылку.
TomyJaya
Должно быть, это был \. эффект на этом сайте :)
killjoy
13

Другой вариант, если вы используете vue cli 3, - это использовать файл конфигурации. Сделайте a vue.config.jsна том же уровне, что и ваш, package.jsonи поместите такую ​​конфигурацию:

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

Настраиваем с помощью скрипта:

npm run serve --port 3000

отлично работает, но если у вас есть больше параметров конфигурации, мне нравится делать это в файле конфигурации. Вы можете найти больше информации в документации .

derFBeste
источник
1
Мне нравится этот ответ, поскольку он показывает, что vue.config.js можно использовать, чтобы просто изменить порт и оставить все остальное как есть, что было задано изначально.
Twisted
10

Лучший способ - обновить команду сценария serve в вашем 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"
},
Жюльен Ле Купанек
источник
9

Если вы хотите изменить порт localhost, вы можете изменить тег скриптов в package.json :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "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. Вы можете это получить.

самолет
источник
5

Альтернативный подход к vue-cliверсии 3 - добавить .envфайл в корневой каталог проекта (рядом package.json) с содержимым:

PORT=3000

Запуск npm run serveтеперь будет указывать на то, что приложение работает на порту 3000.

Крис Диксон
источник
5

Здесь есть много ответов, которые различаются в зависимости от версии, поэтому я подумал, что подтвердю и подробно изложу ответ Жюльена Ле Купанека выше от октября 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для некоторых может пригодиться встроенное редактирование .

Кевин
источник
2

Добавьте PORTпеременную env в свой serveскрипт в package.json:

"serve": "PORT=4767 vue-cli-service serve",
Доминик
источник
2

О Боже! Это не так уж сложно, с этими ответами, которые тоже работают. Однако другие ответы на этот вопрос также работают хорошо.

Если вы действительно хотите использовать , 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-service: https://cli.vuejs.org/guide/cli-service.html

Ибрагим
источник
самое простое решение, спасибо!
Savrige
0

В моем проекте vue в коде Visual Studio мне пришлось установить это в /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" разблокируйте коды.
Теперь укажите желаемый номер порта в "port" :)

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 => {}
}
MRIDUAVA
источник
3
перейти в node_modules / @ vue / cli-service ...? Разве это не перезаписывается при обновлении npm?
Joeri