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

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

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

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

Теперь вы можете получить доступ к своему приложению с помощью localhost:4545

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

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

npm run serve -- --port 3000

Тогда посетите http://localhost:3000/

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

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

Vue CLI v3

• package.json: Добавить параметр порта в serveсценарий:scripts.serve=vue-cli-service serve --port 4000
• CLI Вариант --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 }

Ссылки:

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

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

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

Ссылки:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

На момент написания этого ответа (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-server» ( https://webpack.js.org/configuration/dev-server/ ) доступны в devServerразделе.

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

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

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

npm run serve --port 3000

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

Лучший способ - обновить команду сценария serve в вашем 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"
},

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

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "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. Вы можете это получить.

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

PORT=3000

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

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

1. Откройте package.jsonфайл в корневом каталоге проекта Vue.js.
2. Найдите в package.jsonфайле "порт" .

3. Обнаружив следующую ссылку на «порт», отредактируйте serveэлемент скрипта, чтобы отразить желаемый порт, используя тот же синтаксис, что показан ниже:

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

4. Обязательно перезапустите npmсервер, чтобы избежать ненужного безумия.

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

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

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

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

Если вы действительно хотите использовать , 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-service: https://cli.vuejs.org/guide/cli-service.html

В моем проекте 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" разблокируйте коды.
Теперь укажите желаемый номер порта в "port" :)

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 => {}
}