Pourquoi uniapp n'ouvre-t-il pas automatiquement le navigateur ?

Lors du développement de projets Uniapp, nous utilisons souvent des outils de ligne de commande pour démarrer le projet. La méthode de développement traditionnelle est qu'après avoir démarré le projet, l'outil ouvrira automatiquement le navigateur par défaut et y affichera notre page de projet. Cependant, certains développeurs ont constaté que lors de l'utilisation de la dernière version du framework uniapp, l'outil de ligne de commande n'ouvre plus automatiquement le navigateur. Pourquoi est-ce ? Comment résoudre ce problème ?

Cause du problème

Nous devons d'abord comprendre le modèle de développement du projet uniapp. uniapp adopte un modèle de développement unifié multi-terminal et son processus de développement comprend deux liens : le développement local, la compilation et la publication. Lors du développement local, nous devons utiliser l'outil de ligne de commande fourni par uniapp pour démarrer le projet, c'est-à-dire utiliser la commande npm run dev:%PLATFORM%. Parmi eux, %PLATFORM% représente la plateforme correspondant au projet en cours, comme h5, app, etc. Lors de l'exécution de cette commande, nous constaterons que la console affiche les informations suivantes : npm run dev:%PLATFORM%指令。其中，%PLATFORM%代表当前项目所对应的平台，例如h5、app等。在执行这个命令时，我们会发现控制台输出了以下信息：

 DONE  Compiled successfully in xxxms                                                             
                                                                                        14:38:11

  App running at:
  - Local:   http://localhost:8080/ 

  Network: http://192.168.xxx.xxx:8080/

我们可以看到，在Local这一行中，控制台输出了我们本地项目的访问地址，这个地址一般是http://localhost:8080/。在传统的开发方式中，控制台还会自动打开浏览器，并在其中展示出我们的项目页面。

但是，在最新版的uniapp框架中，命令行工具默认关闭了自动打开浏览器的功能。这个修改是基于安全性的考虑，因为开发者的项目可能包含一些敏感信息，如果随意打开浏览器展示项目，可能会引起安全问题。

解决方法

既然知道了问题的原因，我们就可以采取相应的措施来解决这个问题了。方法有以下两个。

方法一

在执行命令行工具的启动指令时，加上-o参数即可实现自动打开浏览器的功能。指令如下：

npm run dev:%PLATFORM% -o

其中，-o参数表示打开浏览器。

方法二

修改vue.config.js配置文件，配置自动打开浏览器的功能。具体步骤如下：

1.在项目根目录下新建vue.config.js文件。

2.在vue.config.js文件中添加以下代码：

module.exports = {
  devServer: {
    open: true
  }
}

其中，open:truerrreee

Nous pouvons voir que dans la ligne Local, la console affiche l'adresse d'accès de notre projet local. Cette adresse est généralement celle-ci. est http://localhost:8080/. Dans la méthode de développement traditionnelle, la console ouvrira également automatiquement le navigateur et y affichera notre page de projet.

Cependant, dans la dernière version du framework uniapp, l'outil de ligne de commande désactive la fonction d'ouverture automatique du navigateur par défaut. Cette modification est basée sur des considérations de sécurité, car le projet du développeur peut contenir des informations sensibles, et si vous ouvrez le navigateur pour afficher le projet à volonté, cela peut entraîner des problèmes de sécurité.

Solution🎜🎜Maintenant que nous connaissons la cause du problème, nous pouvons prendre les mesures appropriées pour résoudre le problème. Il existe deux méthodes. 🎜🎜Méthode 1🎜🎜Lors de l'exécution de la commande de démarrage de l'outil de ligne de commande, ajoutez le paramètre -o pour réaliser la fonction d'ouverture automatique du navigateur. La commande est la suivante : 🎜rrreee🎜 Parmi eux, le paramètre -o signifie ouvrir le navigateur. 🎜🎜Méthode 2🎜🎜Modifiez le fichier de configuration vue.config.js et configurez la fonction d'ouverture automatique du navigateur. Les étapes spécifiques sont les suivantes : 🎜🎜1. Créez un nouveau fichier vue.config.js dans le répertoire racine du projet. 🎜🎜2. Ajoutez le code suivant dans le fichier vue.config.js : 🎜rrreee🎜 Parmi eux, open:true signifie ouvrir automatiquement le navigateur au démarrage du projet. 🎜🎜Résumé🎜🎜Lors de l'utilisation d'uniapp pour développer un projet, si l'outil de ligne de commande n'ouvre pas automatiquement le navigateur, nous pouvons utiliser les deux méthodes ci-dessus pour résoudre ce problème. Cependant, lors de la modification de la configuration par défaut du projet, il faut veiller à contrôler l'affichage à volonté des informations sensibles du développeur pour éviter les problèmes de sécurité. 🎜

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!