Изменение порта в проекте 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 и документацию в соответствии с изменениями порта.

Полезные материалы

1. Справочник по конфигурации | Vue CLI
2. Режимы и переменные окружения | Vue CLI
3. DevServer | webpack
4. Справочник по конфигурации | Vue CLI
5. Serve: Error watching file for changes: UNKNOWN · Issue #1902 · vuejs/vue-cli · GitHub
6. Руководство по разработке плагинов | Vue CLI
7. dotenv – npm.