如何使Vue devtools在生产模式下用于铬扩展？

Question

我正在构建一个铬扩展名，并使用vue-cli webpack配置。我希望能够在运行命令之后使用vue devtools。

我试图在Vue.config.devtools = true;中添加main.js，或者将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但是vue devtools仍然没有出现。

如何在生产模式下启用vue devtools？

Answer 1

首先，在Chrome开发环境中使用Vue devtools是启用的。

体验

这些天我正在开发一个Chrome浏览器插件，我发现__VUE_DEVTOOLS_GLOBAL_HOOK__没有定义。

虽然不是什么大问题，但我想解决它，我已经在网上搜索了很多信息。

示例：

1.开放chrome-extension://<hash>/app.html

2.将Vue.config.devtools设为真

3.授予Vue Devtools ext文件访问权限

，但一切都不起作用。

解决方案

正如我们所知，vue-devtools是Vue生态系统中必不可少的一部分，但它目前与web浏览器绑定在一起。

但是现在有一个包提供了一个独立的vue-devtools应用程序，它可以用于调试任何Vue应用程序，而不管环境如何。现在，您可以调试在移动浏览器、safari、本机脚本等中打开的应用程序，而不仅仅是桌面chrome或firefox。

这个包名是vue-remote-devtools，它是一个独立的电子外壳，用于远程调试Vue应用程序！

让我们试试看：

按照README.md步骤，

1. 在全球范围内安装软件包： npm install -g @vue/devtools
2. 在您的终端中运行：vue-devtools 您将看到一个电子应用程序如下所示

3.将脚本标签插入到Chrome扩展.html文件中。

警告

由于Chrome的内容安全策略(CSP)对插件的限制，Chrome扩展的web请求可能会被阻止。

此时，您需要修改Chrome配置文件manifest.js。

content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"

虽然您可以将content_security_policy复制到相应的文件manifest.js，但我仍然希望您能够找到CSP是什么：

什么是内容安全策略(CSP)

最后

连接成功！

​

参考：

vue-远程-devtools

用于Chrome扩展开发的DevTools。

Answer 2

看起来我有这个问题，因为我试图在Chrome扩展中使用vue devtools。不幸的是，不可能使用vue devtools，因为扩展页是通过chrome-extension://提供的。

进一步阅读：https://github.com/vuejs/vue-devtools/issues/120