Изменение порта в проекте Vue-cli: подробное руководство
Быстрый ответ
Для изменения номера порта в проекте Vue CLI, добавьте в корневой файл vue.config.js
объект devServer
со свойством port
, в котором укажите новый порт:
module.exports = {
devServer: {
port: 8081 // Да, так просто!
}
};
Не забудьте перезапустить приложение Vue для применения обновлённых настроек порта. Теперь давайте рассмотрим весь процесс более детально.
Проверка возможных конфликтов портов
Прежде чем вносить изменения, стоит проверить, не занят ли выбранный порт другими службами на вашем компьютере. Выбор нестандартного номера порта помогает избежать конфликтов.
Изменение порта на ходу
Для временного изменения номера порта можно использовать флаг --port
команды serve
:
npm run serve -- --port 8082 // Вуаля, работает на порту 8082!
Это удобно для тестирования или параллельного запуска нескольких экземпляров проекта на разных портах.
Зафиксирование изменений порта
Если вы хотите зафиксировать изменения порта, присвойте его значение переменной окружения PORT
.
Объявление порта в переменных окружения
Создайте в корне проекта файл .env
и укажите в нём порт следующим образом:
PORT=8083 // Теперь всё будет так, как предполагалось.
Работа с проектами на Vue CLI v2
Для проектов на Vue CLI v2 устанавливают порт через переменную окружения перед запуском сервера разработки:
export PORT=8084 && npm run dev // Старые методы тоже работают!
Настройка мощности вашего проекта
Изменение порта в проекте Vue CLI можно сравнить со сменой радиочастоты:
Проект Vue CLI (📻): Мы больше не работаем на 8080!
Мы выбираем новую "волну":
.env
PORT=1234 // Пусть все знают наш новый адрес!
Теперь ваш проект Vue "играет" на новой частоте:
📻 ➡️ 🔄 ➡️ 🎵: Мир, слушайте, теперь мы на 1234!
Настройка порта и хоста
В комлпексных ситуациях с настройками хоста и сети следует использовать более продвинутые методы.
Добавление хоста в участники
Для настройки определённого хоста добавьте свойство host
в vue.config.js
:
module.exports = {
devServer: {
host: 'localhost', // Привет, я выбрал localhost как свой дом!
port: 8085 // Здесь будут мои правила.
}
};
Изучение возможностей webpack-dev-server
В документации webpack вы найдете множество настроек для DevServer
.
Преодоление трудностей смены порта
Сложности, такие как фаервол или занятый порт, можно обойти, используя инструменты netstat
или lsof
для проверки занятости портов.
Устранение ошибок напрямую
Если встает ошибка, что порт уже занят, используйте команду:
sudo lsof -i :8086 // Узнаем, кто занял порт.
Замените 8086
на номер интересующего вас порта, и если проблема не исчезла, завершите процесс, который занимает порт.
Управление после смены порта
После запуска на новом порте удостоверьтесь, что все функции приложения работают, так как смена порта может повлиять на интегрированные сервисы.
Обновление рабочего процесса разработки
Не забудьте обновить все точки связи с API, настройки CORS и документацию в соответствии с изменениями порта.