Как изменить номер порта в проекте vue-cli
Как изменить номер порта в проекте Vue-cli, чтобы он работал на другом порту вместо 8080.
7 ответов
порт для шаблона vue-cli webpack находится вmyApp/config/index.js
.
все, что вам нужно сделать, это изменить port
внутри dev
блок:
dev: {
proxyTable: {},
env: require('./dev.env'),
port: 4545,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false
}
теперь вы можете получить доступ к приложению с localhost:4545
и .env
файл лучше установить оттуда
как время написания этого ответа (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/) доступен в пределах .
если вы используете vue-cli
3.x, вы можете просто передать порт в вот так:
npm run serve -- --port 3000
http://localhost:3000/
на webpack.config.js
:
module.exports = {
......
devServer: {
historyApiFallback: true,
port: 8081, // you can change the port there
noInfo: true,
overlay: true
},
......
}
вы можете изменить порт в module.exports
->devServer
->port
.
тогда вы restrat npm run dev
. Вы можете получить это.
другой вариант, если вы используете Vue cli 3, должен использовать файл конфигурации. Сделайте vue.config.js
на том же уровне, что и ваш package.json
и поставить конфиг вот так:
module.exports = {
devServer: {
port: 3000
}
}
настройка его с помощью скрипта:
npm run serve --port 3000
отлично работает, но если у вас больше опций конфигурации, мне нравится делать это в файле конфигурации. Вы можете найти более подробную информацию в docs.
альтернативный подход с vue-cli
вариант 3-Добавить .env
файл в корневом каталоге проекта (вдоль стороны package.json
) с содержанием:
PORT=3000
под управлением npm run serve
теперь будет означать, что приложение работает на порту 3000.
лучший способ-обновить команду сценария подачи в вашем . Просто добавьте --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"
},