Как изменить номер порта в проекте Vue-cli, чтобы он работал на другом порту вместо 8080.

Ответы (17)

Порт для шаблона веб-пакета Vue-cli находится в корневом каталоге вашего приложения myApp / config / index.js.

Все, что вам нужно сделать, это изменить значение port внутри блока dev:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

Now you can access your app with localhost:4545

также если у вас есть файл .env, лучше установить его оттуда

Другой вариант, если вы используете vue cli 3, - использовать файл конфигурации. Сделайте vue.config.js на том же уровне, что и ваш package.json и поместите такую ​​конфигурацию:

module.exports = {
  devServer: {
    port: 3000
  }
}

Настраиваем скриптом:

npm run serve --port 3000

отлично работает, но если у вас есть больше параметров конфигурации, мне нравится делать это в файле конфигурации. Дополнительную информацию можно найти в документах.

Если вы используете vue-cli 3.x, вы можете просто передать порт команде npm следующим образом:

npm run serve - --port 3000

Затем посетите http://localhost: 3000 /

Поздно, но я думаю, что было бы полезно объединить все эти ответы в один, описывающий все варианты.

Разделено в Vue CLI v2 (шаблон веб-пакета) и Vue CLI v3 в порядке приоритета (от высокого к низкому).

Vue CLI v3

  • package.json: Добавить параметр порта в serve script: scripts.serve = vue-cli-service serve --port 4000
  • Параметр CLI - порт на 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 Файлы, более конкретные env имеют приоритет над менее конкретными, напримерПОРТ = 3242
  • vue.config.js, devServer.port, напримерdevServer: {порт: 9999}

Справочная информация:

Vue CLI v2 (устарело)

  • Переменная среды $ PORT, напримерPORT = 3000 npm run dev
  • / config / index.js: dev.port

Справочная информация:

Добавьте переменную env PORT в свой сценарий serve в package.json:

"serve": "PORT=4767 vue-cli-service serve",

Если вы хотите изменить порт localhost, вы можете изменить тег скриптов в package.json:

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Если вы используете пряжу:

yarn serve --port 3000

Здесь много ответов, которые различаются в зависимости от версии, поэтому я подумал, что подтвердю и изложу приведенный выше ответ Жюльена Ле Купанека от октября 2018 года при использовании Vue CLI. В самой последней версии Vue.js на момент публикации - vue@2.6.10 - описанные ниже шаги имели для меня наибольший смысл после просмотра некоторых из бесчисленных ответов в этом сообщении. Документация Vue.js ссылается на части этой головоломки, но не так подробно.

  1. Откройте файл package.json в корневом каталоге проекта Vue.js.
  2. Найдите «порт» в файле package.json.
  3. Найдя следующую ссылку на «порт», отредактируйте элемент сценария serve, чтобы отразить желаемый порт, используя тот же синтаксис, как показано ниже:

    "скрипты": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. Обязательно перезапустите сервер npm, чтобы избежать ненужного безумия.

В документации показано, что можно эффективно получить тот же результат, добавив - порт 8080 в конец команды npm run serve, например: npm run serve - порт 8080. Я предпочел редактировать package.json напрямую, чтобы избежать лишнего набора текста, но редактирование npm run serve --port 1234 inline может пригодиться некоторым.

На момент написания этого ответа (5 мая 2018 г.) конфигурация vue-cli размещалась в <каталог_проекта> /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,
  },
  // ...
}

Full vue.config.js ссылку можно найти здесь: https://cli.vuejs.org/config/#global-cli-config

Обратите внимание, что, как указано в документации, «Все параметры для webpack-dev-server» (https://webpack.js.org/configuration/dev-server/) доступны в разделе devServer.

Альтернативный подход с vue-cli версии 3 - добавить файл .env в корневой каталог проекта (вместе с package.json) с содержание:

PORT=3000

Running npm run serve теперь будет указывать, что приложение работает на порту 3000.

Лучший способ - обновить команду сценария serve в вашем файле package.json. Просто добавьте - порт 3000 вот так:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},

В моем проекте vue в коде Visual Studio мне пришлось установить это в / 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 => {}
}

Чтобы изменить порт (NPM), перейдите в package.json. В скриптах напишите свой скрипт, например:

"start": "npm run serve --port [PORT YOU WANT]"

После этого вы можете начать с npm start

В webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

Вы можете изменить порт в модуле . Export -> devServer -> port.

Затем вы ограничиваете npm run dev. Вы можете это получить.

Боже мой! Это не так уж сложно, с этими ответами, которые тоже работают. Однако есть и другие ответы на этот вопрос.

Если вы действительно хотите использовать vue-cli-service и если вы хотите, чтобы настройки порта были в вашем файле package.json, который ваш 'vue create 'в основном создает, вы можете использовать следующую конфигурацию: - порт 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-service: https://cli.vuejs.org/guide/cli-service.html

Первый вариант:

OPEN package.json и добавьте "- port port-no" в раздел "serve".

Так же, как показано ниже, я сделал это.

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

Второй вариант: если вы хотите через командную строку

npm run serve --port 8090

2022 WebDevInsider