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

npm run serve -- --port 3000

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

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

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

Vue CLI v3

• package.json: Добавьте опцию порта к serve сценарий: scripts.serve=vue-cli-service serve --port 4000
• Опция --port 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 Файлы, более определенные 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

, что, как указано в документах, опции “All для webpack-dev-server” ( https://webpack.js.org/configuration/dev-server / ) доступны в эти devServer раздел.

В 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, состоит в том, чтобы использовать файл конфигурации. Сделайте vue.config.js на том же уровне как Ваш package.json и поместите конфигурацию как так:

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

Конфигурирование его со сценарием:

npm run serve --port 3000

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

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

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

PORT=3000

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

В моем 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    
         }
}

Добавьте PORT envvariable к Вашему serve сценарий в package.json:

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