Как изменить номер порта в Vue CLI

Vue.js - это надежный и модный интерфейсный фреймворк. Он признан комбинацией двух впечатляющих фреймворков, Angular и React, с использованием синтаксиса шаблонов Angular и метода props React. Он предоставляет традиционный способ создания компонентов HTML и CSS и известен тем, что делает интерфейсные приложения действительно быстрыми и легкими. Однако нам часто приходится сталкиваться с некоторыми проблемами и проблемами или просто нам нужна другая конфигурация, поэтому мы рассмотрим сценарий, в котором нам нужно изменить номер порта в проекте Vue CLI. Давайте начнем.

Номер порта по умолчанию для Vue CLI

Когда вы запускаете проект Vue с помощью npm run serve команде номер порта 8080 автоматически назначается проекту Vue, и он запускается на этом номере порта. При запуске Vue.js, терминал показывает результат примерно так:

$ npm run serve

На приведенном выше снимке экрана назначен порт по умолчанию: 8080, где работает проект. В редких случаях, если порт 8080 занят, порт 8081 назначается проекту Vue, и так продолжается до тех пор, пока не будет найден свободный номер порта. Но что, если вы хотите изменить и назначить какой-либо другой номер порта по вашему выбору. Давайте посмотрим и узнаем, как изменить номер порта по умолчанию в проекте Vue CLI.

Измените номер порта по умолчанию для Vue CLI

Что ж, есть два способа изменить номер порта, назначенный по умолчанию для Vue.js проект. Один - временно изменить номер порта, а второй - навсегда изменить номер порта. Итак, начнем с первого метода изменения номера порта Vue CLI.

Метод 1: временно изменить номер порта
Номер порта проекта Vue CLI можно легко изменить во время работы Vue.js с использованием npm run serve; вам просто нужно добавить - -порт с номером порта по вашему желанию npm run serve как показано в приведенной ниже команде:

$ npm run serve - --port 4000

Теперь, когда проект успешно скомпилирован, вы можете увидеть, что номер порта изменен на 4000.

На приведенном выше снимке экрана вы можете увидеть, что приложение работает в порту 4000, но этот порт назначается временно, пока приложение не будет запущено. После того, как вы завершите пакет и запустите проект, не предоставляя порт для npm run serve , то снова будет назначен порт по умолчанию 8080, иначе вам придется назначать порт каждый раз, когда вы запускаете приложение. К счастью, у нас есть еще один метод, предоставляемый Vue.js, с помощью которого мы можем навсегда изменить номер порта нашего проекта Vue, поэтому давайте продолжим и посмотрим, как навсегда изменить номер порта проекта Vue CLI.

Метод 2: навсегда изменить номер порта проекта Vue CLI
Если вы заинтересованы в изменении номера порта по умолчанию вашего Vue.js проект навсегда. Просто следуйте инструкциям, приведенным ниже, и у вас будет собственный желаемый номер порта, назначенный вашему Vue.js проект.

Шаг 1: Создать новый vue.config.js файл в корневом каталоге

Прежде всего, вам нужно создать новый файл в корневом каталоге вашего проекта с именем vue.config.js

Шаг 2: Добавьте номер порта в vue.config.js конфигурационный файл

После создания файла конфигурации откройте его и укажите желаемый номер порта в виде пары ключ-значение внутри devServer объект в модуль.экспорт как показано во фрагменте кода ниже:

модуль.export =
devServer:
порт: 3000

Как только вы это сделаете, сохраните приложение, нажав CTRL + S сочетания клавиш и запуск приложения.

Шаг 3: Запустить приложение

Теперь запустите приложение, используя npm run serve команда и без добавления номера порта.

$ npm run serve

Вы увидите, что номер порта 3000 назначен успешно, и приложение работает на указанном вами номере порта в vue.config.js файл.

Вот как вы можете изменить или установить номер порта по вашему выбору в проекте Vue CLI.

Заключение

В этом посте мы узнали о двух разных способах изменения или установки номера порта временно и навсегда в проекте Vue CLI и объяснили их с помощью глубокого и простого для понимания пошагового метода.