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

Réponses:

20

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à

Samayo
la source
18
Dans la dernière version de vuejs. Le fichier n'est plus utilisé, à la place en utilisant: <your_project_root> /vue.config.js.
Jianwu Chen
3
Le fichier myApp/config/index.jsn'existe pas!
exhuma le
3
Vue CLI 3 utilise vue.config.js à la racine du projet. Il doit être créé manuellement IIRC.
Ege Ersoz
1
il n'y a pas de vue.config.js là
Geomorillo
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta
124

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/

Nick Litwin
la source
7
Vous m'avez fait gagner un temps précieux, car le premier --n'est pas écrit dans la doc: cli.vuejs.org/guide/cli-service.html#using-the-binary . J'étais en train de taper npm run serve --port 3000ce qui me semble logique, mais j'ai eu des erreurs ... Bravo!
toni07
3
C'est parce que le premier --échappe aux paramètres donnés à npm run serveet non à vue-cli-service. Si vous éditez package.jsonet la servecommande directement, vous la saisissez comme indiqué dans la documentation:"serve": "vue-cli-service serve --port 3000",
MatsLindh
93

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:

Vue CLI v2 (obsolète)

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

Références:

wwerner
la source
3
On dirait que cela a changé un peu dans la dernière vue cli ( en utilisant 3.4.1), voici ma ligne « servir » dans package.json: "serve": "vue-cli-service serve --port 4000",. Fonctionne très bien!
RoccoB
@RoccoB Merci, je l'ai vérifié et ajouté à la réponse.
wwerner
Les réponses ci-dessus ne semblent pas fonctionner dans la v3 à ce jour. J'ai essayé l'option .env, package.json, vue.config.js et l'option de commande CLI, mais elles sont toutes ignorées. La documentation du fichier de configuration dit "Certaines valeurs comme host, portet httpspeuvent être écrasées par des indicateurs de ligne de commande." cli.vuejs.org/config/#devserver Est-ce que je manque quelque chose? Quelqu'un d'autre a des problèmes?
Ryan
2
@Ryan - Cela a été signalé hier dans le référentiel CLI VueJS Problèmes: github.com/vuejs/vue-cli/issues/4452 Il est dit d'installer portfinder ( github.com/http-party/node-portfinder ) car il y avait un changement de rupture qui s'est produit avec cela.
Angelo
38

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.

TomyJaya
la source
1
@srf: Réponse modifiée. Merci d'avoir signalé le lien rompu.
TomyJaya
Ça doit être un \. effet sur ce site :)
killjoy
13

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 .

derFBeste
la source
1
J'aime cette réponse car elle montre que vue.config.js peut être utilisé pour simplement changer le port et laisser tout le reste tel quel, ce qui a été demandé à l'origine.
Twisted
9

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"
},
Julien Le Coupanec
la source
8

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.

avion
la source
8

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"
  },
Fatih Başar
la source
Merci beaucoup :-)
Adam Orlov le
5

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.

Chris Dickson
la source
4

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 - [email protected] - 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.

Kevin
la source
1

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

"serve": "PORT=4767 vue-cli-service serve",
Dominique
la source
1

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

Ebrahim
la source
0

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    
         }
}
Terje Solem
la source
0

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 => {}
}
MRIDUAVA
la source
3
allez dans node_modules / @ vue / cli-service ...? Cela n'est-il pas écrasé lors de la mise à jour npm?
Joeri