Как изменить номер порта в проекте Vue-cli, чтобы он работал на другом порту вместо 8080.
106
Как изменить номер порта в проекте Vue-cli, чтобы он работал на другом порту вместо 8080.
Порт для шаблона веб-пакета Vue-cli находится в корневом каталоге вашего приложения myApp/config/index.js
.
Все, что вам нужно сделать, это изменить port
значение внутри dev
блока:
dev: {
proxyTable: {},
env: require('./dev.env'),
port: 4545,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false
}
Теперь вы можете получить доступ к своему приложению с помощью localhost:4545
также, если у вас есть .env
файл, лучше установить его оттуда
myApp/config/index.js
не существует!"scripts": { "serve": "vue-cli-service serve --port 80" },
Если вы используете
vue-cli
3.x, вы можете просто передать портnpm
команде следующим образом:npm run serve -- --port 3000
Тогда посетите
http://localhost:3000/
источник
--
не написано в документе: cli.vuejs.org/guide/cli-service.html#using-the-binary . Я печатал,npm run serve --port 3000
что кажется мне логичным, но у меня были ошибки ... Недурно!--
побеги параметры даноnpm run serve
и не вvue-cli-service
. Если вы редактируетеpackage.json
иserve
команду напрямую, вы вводите ее, как показано в документации:"serve": "vue-cli-service serve --port 3000",
Поздно к вечеринке, но я думаю, что было бы полезно объединить все эти ответы в один, описывающий все варианты.
Разделено в Vue CLI v2 (шаблон веб-пакета) и Vue CLI v3 в порядке приоритета (от высокого к низкому).
Vue CLI v3
package.json
: Добавить параметр порта вserve
сценарий:scripts.serve=vue-cli-service serve --port 4000
--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
Ссылки:
источник
"serve": "vue-cli-service serve --port 4000",
. Прекрасно работает!host
,port
иhttps
могут быть перезаписаны флагами командной строки». cli.vuejs.org/config/#devserver Я что-то упускаю ? У кого-нибудь еще есть проблемы?На момент написания этого ответа (5 мая 2018 г.)
vue-cli
его конфигурация размещалась по адресу<your_project_root>/vue.config.js
. Чтобы изменить порт, см. Ниже:Полную
vue.config.js
ссылку можно найти здесь: https://cli.vuejs.org/config/#global-cli-configОбратите внимание, что, как указано в документации, «Все параметры для webpack-dev-server» ( https://webpack.js.org/configuration/dev-server/ ) доступны в
devServer
разделе.источник
Другой вариант, если вы используете vue cli 3, - это использовать файл конфигурации. Сделайте a
vue.config.js
на том же уровне, что и ваш,package.json
и поместите такую конфигурацию:Настраиваем с помощью скрипта:
отлично работает, но если у вас есть больше параметров конфигурации, мне нравится делать это в файле конфигурации. Вы можете найти больше информации в документации .
источник
Лучший способ - обновить команду сценария serve в вашем
package.json
файле. Просто добавьте--port 3000
так:источник
Если вы хотите изменить порт localhost, вы можете изменить тег скриптов в package.json :
источник
В
webpack.config.js
:Вы можете изменить порт в
module.exports
->devServer
->port
.Затем вы ограничиваете
npm run dev
. Вы можете это получить.источник
Альтернативный подход к
vue-cli
версии 3 - добавить.env
файл в корневой каталог проекта (рядомpackage.json
) с содержимым:PORT=3000
Запуск
npm run serve
теперь будет указывать на то, что приложение работает на порту 3000.источник
Здесь есть много ответов, которые различаются в зависимости от версии, поэтому я подумал, что подтвердю и подробно изложу ответ Жюльена Ле Купанека выше от октября 2018 года при использовании Vue CLI . В самой последней версии Vue.js на момент публикации - vue@2.6.10 - описанные ниже шаги стали для меня наиболее понятными после просмотра множества ответов в этой публикации. Документация Vue.js ссылается на части этой головоломки, но не так явно.
package.json
файл в корневом каталоге проекта Vue.js.package.json
файле "порт" .Обнаружив следующую ссылку на «порт», отредактируйте
serve
элемент скрипта, чтобы отразить желаемый порт, используя тот же синтаксис, что показан ниже:Обязательно перезапустите
npm
сервер, чтобы избежать ненужного безумия.Шоу документации , что можно эффективно получить тот же результат, добавив
--port 8080
к концуnpm run serve
команды , как так:npm run serve --port 8080
. Я предпочел редактироватьpackage.json
непосредственно, чтобы избежать лишнего набора текста, ноnpm run serve --port 1234
для некоторых может пригодиться встроенное редактирование .источник
Добавьте
PORT
переменную env в свойserve
скрипт вpackage.json
:источник
О Боже! Это не так уж сложно, с этими ответами, которые тоже работают. Однако другие ответы на этот вопрос также работают хорошо.
Если вы действительно хотите использовать ,
vue-cli-service
и если вы хотите иметь настройку порта в вашемpackage.json
файл, который ваш «ви создать <приложение-имя>» команда в основном создает, вы можете использовать следующую конфигурацию:--port 3000
. Итак, вся конфигурация вашего скрипта будет такой:Я использую
@vue/cli 4.3.1 (vue --version)
на устройстве MacOS.Я также добавил ссылку на vue-cli-service: https://cli.vuejs.org/guide/cli-service.html
источник
В моем проекте vue в коде Visual Studio мне пришлось установить это в /config/index.js . Измените его в:
источник
Перейдите к node_modules/@vue/cli-service/lib/options.js
Внизу внутри "devServer" разблокируйте коды.
Теперь укажите желаемый номер порта в "port" :)
источник