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

Le port du modèle Webpack Vue-cli se trouve dans la racine de votre application myApp/config/index.js.

Tout ce que vous avez à faire est de modifier la portvaleur à l'intérieur du devbloc:

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

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

aussi si vous avez un .envfichier mieux vaut le définir à partir de là

Si vous utilisez vue-cli3.x, vous pouvez simplement passer le port à la npmcommande comme ceci:

npm run serve -- --port 3000

Puis visitez http://localhost:3000/

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

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

Vue CLI v3

• package.json: Ajouter une option de port au servescript:scripts.serve=vue-cli-service serve --port 4000
• Option CLI --portpour npm run serve, par exemple npm run serve -- --port 3000. Notez que --, cela fait passer l'option de 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 exemplePORT=3000 npm run serve
• .env Les fichiers, les environnements plus spécifiques remplacent les moins spécifiques, par exemple PORT=3242
• vue.config.js, devServer.portPar exempledevServer: { 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 (obsolète)

• Variable d'environnement $PORT, par exemplePORT=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

Au moment de la rédaction de cette réponse (5 mai 2018), vue-clisa configuration est hébergée sur <your_project_root>/vue.config.js. Pour changer de 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 vue.config.jsréférence complète peut être trouvée ici: https://cli.vuejs.org/config/#global-cli-config

Notez que comme indiqué dans la documentation, «Toutes les options pour webpack-dev-server» ( https://webpack.js.org/configuration/dev-server/ ) est disponible dans la devServersection.

Une autre option si vous utilisez vue cli 3 est d'utiliser un fichier de configuration. Faites un vue.config.jsau même niveau que le vôtre package.jsonet mettez une config comme ceci:

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

Configurer avec le script:

npm run serve --port 3000

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

Le meilleur moyen est de mettre à jour la commande de script serve dans votre package.jsonfichier. Ajoutez simplement --port 3000comme ceci:

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

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

Si vous souhaitez modifier le port localhost, vous pouvez modifier la balise scripts dans package.json :

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

Une approche alternative avec la vue-cliversion 3 consiste à ajouter un .envfichier dans le répertoire racine du projet (à côté package.json) avec le contenu:

PORT=3000

L'exécution npm run serveindiquera maintenant que l'application s'exécute sur le port 3000.

Il y a beaucoup de réponses ici qui varient selon la version, alors j'ai pensé confirmer et exposer la réponse de Julien Le Coupanec ci-dessus à partir d'octobre 2018 lors de l'utilisation de la CLI Vue . Dans la version la plus récente de Vue.js à partir de ce post - vue@2.6.10 - les étapes décrites ci-dessous me semblaient les plus logiques après avoir parcouru certaines des myriades de réponses de ce post. La documentation Vue.js fait référence à des pièces de ce puzzle, mais n'est pas aussi explicite.

1. Ouvrez le package.jsonfichier dans le répertoire racine du projet Vue.js.
2. Recherchez «port» dans le package.jsonfichier.

3. Après avoir trouvé la référence suivante à "port", modifiez l' serveélément de script pour refléter le port souhaité, en utilisant la même syntaxe que ci-dessous:

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

4. Assurez-vous de redémarrer le npmserveur pour éviter une folie inutile.

Les spectacles de documentation que l' on peut effectivement obtenir le même résultat en ajoutant --port 8080à la fin de la npm run servecommande comme ceci: npm run serve --port 8080. J'ai préféré éditer le package.jsondirectement pour éviter une saisie supplémentaire, mais l'édition en npm run serve --port 1234ligne peut être utile pour certains.

Ajoutez la PORTvariable d'environnement à votre servescript dans package.json:

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

Oh mon Dieu! Ce n'est pas si compliqué, avec ces réponses qui fonctionnent aussi. Cependant, d'autres réponses à cette question fonctionnent également bien.

Si vous voulez vraiment utiliser vue-cli-serviceet si vous voulez avoir la configuration du port dans votre package.jsonfichier, que votre commande « vue de créer <app-name> » crée essentiellement, vous pouvez utiliser la configuration suivante: --port 3000. Donc, toute la configuration de votre script serait comme ceci:

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

J'utilise @vue/cli 4.3.1 (vue --version)sur un appareil macOS.

J'ai également ajouté la référence vue-cli-service: https://cli.vuejs.org/guide/cli-service.html

Dans mon projet vue en code de studio visuel, j'ai dû définir cela dans /config/index.js . Changez-le dans:

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

Allez à node_modules/@vue/cli-service/lib/options.js
En bas à l'intérieur du "devServer" débloquez les codes
Maintenant, donnez votre numéro de port souhaité dans le "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 => {}
}