如何在生产模式下为Chrome扩展程序启用Vue devtools？

Question

我正在构建chrome扩展，并使用vue-cli webpack配置。我想在运行 npm run build 命令后能够使用vue devtools。

我尝试在main.js中添加Vue.config.devtools = true;，或者将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但vue devtools仍未显示。

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

Answer 1

首先，在Chrome ext开发环境中使用Vue devtools。

体验

这些天我正在开发Chrome浏览器插件。我发现__VUE_DEVTOOLS_GLOBAL_HOOK__未定义。

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

例如：

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

2.set Vue.config.devtools为真

3.grant Vue Devtools ext文件访问

但一切都行不通。

解决方案

众所周知，vue-devtools是Vue生态系统的重要组成部分，但它目前与网络浏览器相关联。

但是现在有一个软件包提供了一个独立的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扩展程序的网络请求可能会被屏蔽。

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

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

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

What is Content Security Policy (CSP)

最后

连接成功！

参考：

vue-remote-devtools

DevTools for Chrome Extension Development.

Answer 2

看起来我遇到了问题，因为我正在尝试在Chrome扩展程序中使用vue devtools。不幸的是，使用vue devtools是不可能的，因为扩展页面是通过chrome-extension：//

提供的

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