Comment activer Vue devtools en mode production pour les extensions chrome?
Je crée une extension chrome, et j'utilise une configuration de webpack vue-cli. J'aimerais pouvoir utiliser les devtools vue après avoir exécuté le npm run build commande.
J'ai essayé d'ajouter Vue.config.devtools = true; dans main.js, ou modifiez NODE_ENV: '"production"' à NODE_ENV: '"development"', mais vue devtools ne s'affiche toujours pas.
Que puis-je faire pour activer vue devtools en mode production?
Il semble que j'ai le problème car j'essaie d'utiliser vue devtools dans Chrome. Malheureusement, il est impossible d'utiliser vue devtools car les pages d'extension sont servies sur chrome-extension: //
Pour en savoir plus: https://github.com/vuejs/vue-devtools/issues/12
Tout d'abord, utilisez Vue devtools dans Chrome ext L'environnement de développement est activé.
Expérience
Ces jours-ci, je développe un Chrome. J'ai trouvé que __VUE_DEVTOOLS_GLOBAL_HOOK__ indéfini.
Bien que ce ne soit pas un gros problème, mais je veux le résoudre, j'ai cherché beaucoup d'informations en ligne.
exemple:
1. ouvert chrome-extension://<hash>/app.html
2. définir Vue.config.devtools pour être vrai
3.grant Vue Accès au fichier ext Devtools
mais tout ne fonctionne pas.
Solution
Comme nous le savons, vue-devtools est un élément essentiel de l'écosystème Vue, mais il est actuellement lié à un navigateur Web.
Mais maintenant, il existe un package qui fournit une application autonome vue-devtools, qui peut être utilisée pour déboguer n'importe quelle application Vue quel que soit l'environnement. Vous pouvez maintenant déboguer votre application ouverte dans un navigateur mobile, safari, script natif, etc. pas seulement le bureau chrome ou firefox.
Ce nom de package est vue-remote-devtools, qui est un shell électronique autonome pour déboguer à distance Vue apps!
Essayons:
Suivant le README.md pas,
Installez le package globalement:
npm install -g @vue/devtoolsexécuter dans votre terminal:
vue-devtoolsvous verrez une application d'électrons apparaître comme ceci
![Electron Shell]()
3.injectez la balise de script dans votre Chrome extension .html fichier.
Avertissement
En raison des restrictions de la politique de sécurité du contenu (CSP) de Chrome sur les plug-ins, la demande Web de l'extension Chrome peut être bloquée.
À ce stade, vous devez modifier le Chrome Ext manifest.js.
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
Bien que vous puissiez copier content_security_policy vers le fichier correspondant manifest.js, mais j'espère toujours que vous pourrez découvrir ce qu'est le CSP:
Qu'est-ce que la politique de sécurité du contenu (CSP)
Finalement
Connectez le succès！ 
Réf: