Відповіді:
Порт шаблону веб-пакету 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, упорядкований за пріоритетом (від високого до низького).
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 }
Список літератури:
$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
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
розділі.
Інший варіант, якщо ви використовуєте vue cli 3, - це використовувати файл конфігурації. Зробіть vue.config.js
на тому ж рівні, що і ваш, package.json
і поставте такий конфігурацію:
module.exports = {
devServer: {
port: 3000
}
}
Налаштування його за допомогою сценарію:
npm run serve --port 3000
відмінно працює, але якщо у вас є більше параметрів конфігурації, мені подобається робити це у конфігураційному файлі. Більше інформації ви можете знайти в документах .
Найкращий спосіб - оновити команду службового сценарію у вашому 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"
},
У 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
. Ви можете це отримати.
Якщо ви хочете змінити порт localhost, ви можете змінити тег скриптів у package.json :
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
Альтернативний підхід з 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
елемент сценарію, щоб відобразити потрібний порт, використовуючи той самий синтаксис, як показано нижче:
"scripts": {
"serve": "vue-cli-service serve --port 8000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
Не забудьте перезапустити npm
сервер, щоб уникнути зайвих божевільних дій.
Шоу документації , що можна ефективно отримати той же результат, додавши --port 8080
до кінця npm run serve
команди , як так: npm run serve --port 8080
. Я віддав перевагу редагуванню package.json
безпосередньо, щоб уникнути зайвих наборів тексту, але редагування npm run serve --port 1234
вбудованого тексту може бути корисним для деяких.
Боже мій! Це не так вже й складно, з цими відповідями теж працює. Однак інші відповіді на це питання також добре працюють.
Якщо ви дійсно хочете використовувати , 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
У своєму проекті 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
}
}
Перейдіть до 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 => {}
}