Comment modifier le port dans vue.js

Vue.js, en tant que framework front-end, doit démarrer un serveur de développement pendant le processus de développement pour implémenter des fonctions telles que le chargement à chaud et la reconstruction automatique. Par défaut, le serveur de développement Vue.js écoute le port 8080. Cependant, dans certains cas, nous devrons peut-être modifier le numéro de port par défaut pour éviter les conflits ou répondre aux exigences du projet. Voici comment modifier le numéro de port par défaut dans un projet Vue.js.

Première méthode : utiliser les paramètres de ligne de commande

Vue-cli fournit un moyen simple de modifier le port, c'est-à-dire ajouter --port ou -pparamètres. Par exemple, pour changer le numéro de port en 3000, vous pouvez utiliser la commande suivante pour démarrer le serveur de développement : <code>--port或-p参数。例如，要将端口号修改为3000，可以使用以下命令启动开发服务器：

npm run serve -- --port 3000

可以看到，在npm run serve命令后面添加了两个横线，意味着接下来的--port 3000是传递给开发服务器的参数。修改完毕后，Vue应用将在3000端口启动。

第二种方法：修改配置文件

除了使用命令行参数外，我们还可以通过修改Vue项目的配置文件来修改默认的端口号。在Vue-cli 3.x版本中，Vue项目的配置文件位于项目根目录下的vue.config.js文件中。如果该文件不存在，可以手动创建该文件。

在vue.config.js文件中，我们可以通过给devServer

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

Comme vous pouvez le constater, deux lignes horizontales sont ajoutées après la commande npm run serve, ce qui signifie que le --port 3000 suivant est le paramètre transmis au serveur de développement. Une fois la modification terminée, l'application Vue sera démarrée sur le port 3000.

Deuxième méthode : Modifier le fichier de configuration

En plus d'utiliser les paramètres de ligne de commande, nous pouvons également modifier le numéro de port par défaut en modifiant le fichier de configuration du projet Vue. Dans la version Vue-cli 3.x, le fichier de configuration du projet Vue se trouve dans le fichier vue.config.js dans le répertoire racine du projet. Si le fichier n'existe pas, vous pouvez le créer manuellement. 🎜🎜Dans le fichier vue.config.js, nous pouvons modifier le numéro de port par défaut en passant les paramètres de configuration à l'objet devServer. Par exemple, le code suivant modifie le numéro de port en 3000 : 🎜rrreee🎜 Il est à noter que si nous constatons que l'application Vue ne peut pas être démarrée après avoir modifié le port et affiche le message d'erreur "Le port est occupé", cela peut être dû au fait que le port a été utilisé par une autre application occupée. À ce stade, nous devons sélectionner un autre numéro de port et modifier le fichier de configuration correspondant ou les paramètres de ligne de commande. 🎜🎜En bref, que vous utilisiez des paramètres de ligne de commande ou que vous modifiiez le fichier de configuration, vous pouvez facilement modifier le numéro de port par défaut du serveur de développement Vue.js pour répondre aux besoins des différents projets. Dans le même temps, se familiariser avec ces techniques de configuration nous aidera également à mieux comprendre le framework Vue.js et à améliorer l'efficacité du développement et la qualité du code. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!