Comment changer le numéro de port dans un projet Vue-Cli ?

Question

Comment changer le numéro de port dans le projet Vue-cli pour qu'il fonctionne sur un autre port au lieu de 8080.

Answer 1

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

npm run serve -- --port 3000

Alors, visitez http://localhost:3000/

Answer 2

J'arrive tard dans la soirée, mais je pense qu'il est utile de regrouper toutes ces réponses en une seule qui présente toutes les options.

Séparés dans Vue CLI v2 (modèle webpack) et Vue CLI v3, classés par ordre de préséance (de haut en bas).

Vue CLI v3

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

Références :

• 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 (déprécié)

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

Références :

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

Answer 3

Au moment de la rédaction de cette réponse (5 mai 2018), vue-cli a sa configuration hébergée à <your_project_root>/vue.config.js . Pour modifier 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,
  },
  // ...
}

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

Notez que comme indiqué dans la documentation, "All options for webpack-dev-server" ( https://webpack.js.org/configuration/dev-server/ ) est disponible dans le cadre du devServer section.

Answer 4

Le port pour le modèle de webpack Vue-cli se trouve dans le fichier de racine de votre application myApp/config/index.js .

Il suffit de modifier le port à l'intérieur du dev bloc :

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

Vous pouvez maintenant accéder à votre application avec localhost:4545

également si vous avez .env Il est préférable de régler le fichier à partir de là

Answer 5

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 restratez le npm run dev . Vous pouvez l'obtenir.