web-dev-qa-db-fra.com

Comment changer le numéro de port dans le projet vue-cli

Comment changer le numéro de port dans le projet Vue-cli afin qu'il soit exécuté sur un autre port au lieu de 8080.

vue.jsvuejs2command-line-interface
28
salman

Le port du modèle de pack Web Vue-cli se trouve dans le répertoire myApp/config/index.js de la racine de votre application. 

Tout ce que vous avez à faire est de modifier la valeur port dans le bloc dev:

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

Maintenant, vous pouvez accéder à votre application avec localhost:4545 

aussi si vous avez le fichier .env préférable de le configurer à partir de là

10
samayo

Si vous utilisez vue-cli 3.x, vous pouvez simplement passer le port à la commande npm comme suit:

npm run serve -- --port 3000

Puis visitez http://localhost:3000/

34
Nick Litwin

Au moment où cette réponse est écrite (5 mai 2018), la configuration de vue-cli est hébergée à <your_project_root>/vue.config.js. Pour changer le port, voir ci-dessous: 

// 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,
  },
  // ...
}

La référence complète vue.config.js peut être trouvée ici: https://cli.vuejs.org/config/#global-cli-config

Notez que, comme indiqué dans la documentation, «Toutes les options de webpack-dev-server» ( https://webpack.js.org/configuration/dev-server/ ) sont disponibles dans la section devServer. 

22
TomyJaya

En retard pour la fête, mais je pense qu'il est utile de regrouper toutes ces réponses en une seule soulignant toutes les options.

Séparé dans Vue CLI v2 (modèle Webpack) et Vue CLI v3, classés par ordre de priorité (ordre croissant).

Vue CLI v3

  • package.json: option d'option de port pour le script serve: scripts.serve=vue-cli-service serve --port 4000
  • Option CLI --port à npm run serve, par exemple. npm run serve -- --port 3000. Notez le --, cela fait passer l'option port au script npm au lieu de npm lui-même. Depuis au moins la v3.4.1, cela devrait être par exemple vue-cli-service serve --port 3000.
  • Variable d'environnement $PORT, par ex. PORT=3000 npm run serve
  • .env Les fichiers, les envs plus spécifiques remplacent les moins spécifiques, par exemple. PORT=3242
  • vue.config.js, devServer.port, par exemple devServer: { port: 9999 }

Références: 

Vue CLI v2 (obsolète)

  • Variable d'environnement $PORT, par ex. PORT=3000 npm run dev
  • /config/index.js: dev.port

Références:

16
wwerner

Dans le webpack.config.js:

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

Vous pouvez changer le port dans le module.exports -> devServer -> port.

Ensuite, vous restratrat le npm run dev. Vous pouvez l'obtenir. 

5
aircraft

Si vous utilisez Vue Cli 3, vous pouvez également utiliser un fichier de configuration. Créez un vue.config.js au même niveau que votre package.json et mettez une config comme ceci:

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

Le configurer avec le script:

npm run serve --port 3000

fonctionne très bien mais si vous avez plus d’options de configuration, j’aime bien le faire dans un fichier de configuration. Vous pouvez trouver plus d’informations dans docs . 

3
derFBeste

Le meilleur moyen est de mettre à jour la commande serve script dans votre fichier package.json. Il suffit d’ajouter --port 3000 comme suit:

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

Une approche alternative avec vue-cli version 3 consiste à ajouter un fichier .env dans le répertoire du projet racine (à côté de package.json) avec le contenu:

PORT=3000

Lancer npm run serve indiquera maintenant que l'application est en cours d'exécution sur le port 3000.

0
Chris Dickson