Как изменить номер порта в проекте vue-cli

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

13
command-line-interface vue.js vuejs2

7 ответов

порт для шаблона vue-cli webpack находится вmyApp/config/index.js.

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

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

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

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

7

как время написания этого ответа (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/) доступен в пределах .

15

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

npm run serve -- --port 3000

посетить http://localhost:3000/
13

на webpack.config.js:

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

вы можете изменить порт в module.exports ->devServer ->port.

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

5

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

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

настройка его с помощью скрипта:

npm run serve --port 3000

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

3

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

PORT=3000

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

0

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