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.
104
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 port
valeur à l'intérieur du dev
bloc:
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 .env
fichier mieux vaut le définir à partir de là
myApp/config/index.js
n'existe pas!"scripts": { "serve": "vue-cli-service serve --port 80" },
Si vous utilisez
vue-cli
3.x, vous pouvez simplement passer le port à lanpm
commande comme ceci:npm run serve -- --port 3000
Puis visitez
http://localhost:3000/
la source
--
n'est pas écrit dans la doc: cli.vuejs.org/guide/cli-service.html#using-the-binary . J'étais en train de tapernpm run serve --port 3000
ce qui me semble logique, mais j'ai eu des erreurs ... Bravo!--
échappe aux paramètres donnés ànpm run serve
et non àvue-cli-service
. Si vous éditezpackage.json
et laserve
commande directement, vous la saisissez comme indiqué dans la documentation:"serve": "vue-cli-service serve --port 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 auserve
script:scripts.serve=vue-cli-service serve --port 4000
--port
pournpm run serve
, par exemplenpm 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 exemplevue-cli-service serve --port 3000
.$PORT
, par exemplePORT=3000 npm run serve
.env
Les fichiers, les environnements plus spécifiques remplacent les moins spécifiques, par exemplePORT=3242
vue.config.js
,devServer.port
Par exempledevServer: { port: 9999 }
Références:
Vue CLI v2 (obsolète)
$PORT
, par exemplePORT=3000 npm run dev
/config/index.js
:dev.port
Références:
la source
"serve": "vue-cli-service serve --port 4000",
. Fonctionne très bien!host
,port
ethttps
peuvent ê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?Au moment de la rédaction de cette réponse (5 mai 2018),
vue-cli
sa configuration est hébergée sur<your_project_root>/vue.config.js
. Pour changer de port, voir ci-dessous:La
vue.config.js
référence complète peut être trouvée ici: https://cli.vuejs.org/config/#global-cli-configNotez que comme indiqué dans la documentation, «Toutes les options pour webpack-dev-server» ( https://webpack.js.org/configuration/dev-server/ ) est disponible dans la
devServer
section.la source
Une autre option si vous utilisez vue cli 3 est d'utiliser un fichier de configuration. Faites un
vue.config.js
au même niveau que le vôtrepackage.json
et mettez une config comme ceci:Configurer avec le script:
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 .
la source
Le meilleur moyen est de mettre à jour la commande de script serve dans votre
package.json
fichier. Ajoutez simplement--port 3000
comme ceci:la source
Dans le
webpack.config.js
:Vous pouvez changer le port dans le
module.exports
->devServer
->port
.Ensuite, vous restrat le
npm run dev
. Vous pouvez l'obtenir.la source
Si vous souhaitez modifier le port localhost, vous pouvez modifier la balise scripts dans package.json :
la source
Une approche alternative avec la
vue-cli
version 3 consiste à ajouter un.env
fichier dans le répertoire racine du projet (à côtépackage.json
) avec le contenu:PORT=3000
L'exécution
npm run serve
indiquera maintenant que l'application s'exécute sur le port 3000.la source
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.
package.json
fichier dans le répertoire racine du projet Vue.js.package.json
fichier.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:Assurez-vous de redémarrer le
npm
serveur 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 lanpm run serve
commande comme ceci:npm run serve --port 8080
. J'ai préféré éditer lepackage.json
directement pour éviter une saisie supplémentaire, mais l'édition ennpm run serve --port 1234
ligne peut être utile pour certains.la source
Ajoutez la
PORT
variable d'environnement à votreserve
script danspackage.json
:la source
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-service
et si vous voulez avoir la configuration du port dans votrepackage.json
fichier, 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: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
la source
Dans mon projet vue en code de studio visuel, j'ai dû définir cela dans /config/index.js . Changez-le dans:
la source
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" :)
la source