Comment définir le navigateur qui s'ouvre après le démarrage du projet vue

Pendant le processus de développement des projets Vue, nous utilisons généralement les services fournis par webpack-dev-server ou Vue-CLI pour démarrer le serveur de développement local. Une fois ces serveurs de développement démarrés, ils ouvriront automatiquement le navigateur par défaut et visiteront la page d'accueil du répertoire racine du projet. Cependant, dans certains cas, nous devrons peut-être ouvrir un navigateur spécifié au démarrage, par exemple si nous souhaitons utiliser Chrome comme navigateur par défaut pendant le développement.

Alors, comment configurer le projet Vue pour ouvrir le navigateur spécifié après le démarrage ? C’est en fait assez simple, et dans cet article nous présenterons deux méthodes pour atteindre cet objectif.

1. Utilisez le fichier de configuration fourni avec vue-cli

Dans les projets avec Vue-CLI version 3.x ou supérieure, nous pouvons trouver un fichier de configuration vue.config.js dans le répertoire racine du projet, ce qui nous permet de Remplacez et étendez la configuration par défaut. Nous pouvons définir le navigateur au démarrage en ajoutant la configuration suivante au fichier :

module.exports = {
  devServer: {
    open: 'chrome', // 设置启动时的浏览器
    port: 8080 // 设置端口号
  }
}

Ici, nous définissons l'élément de configuration ouvert sur chrome, ce qui signifie utiliser le navigateur Chrome au démarrage. Nous pouvons également définir le numéro de port et d'autres éléments de configuration de devServer associés. Après avoir enregistré les modifications et démarré le serveur de développement, le navigateur Chrome s'ouvrira automatiquement et visitera la page d'accueil du répertoire racine du projet.

2. Utilisez les commandes cross-env et open

Si nous devons définir le navigateur au démarrage dans Vue-CLI 2.x ou d'autres projets utilisant webpack-dev-server, nous pouvons utiliser les commandes cross-env et open. Tout d'abord, nous devons installer la dépendance cross-env dans le projet :

npm install cross-env --save-dev

Ensuite, ajoutez la commande suivante dans le fichier package.json :

{
  "scripts": {
    "dev": "cross-env BROWSER=chrome webpack-dev-server --open --port 8080"
  }
}

Ici, nous définissons l'élément de configuration du NAVIGATEUR sur chrome, ce qui signifie utiliser le Navigateur Chrome au démarrage . Nous avons également utilisé les options --open et --port pour configurer le navigateur pour qu'il s'ouvre automatiquement ainsi que le numéro de port. Exécutez la commande npm run dev pour démarrer le serveur de développement, et le navigateur Chrome s'ouvrira automatiquement et visitera la page d'accueil du répertoire racine du projet.

Résumé

Cet article présente deux méthodes pour configurer le projet Vue afin d'ouvrir le navigateur spécifié après le démarrage : en utilisant le fichier de configuration fourni avec vue-cli et les commandes cross-env et open. Quelle que soit la méthode utilisée, nous pouvons facilement utiliser notre navigateur préféré pour prévisualiser et déboguer pendant le développement.

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!