Google chrome extension 如何在chrome扩展的生产模式下启用Vue devtools？

我正在构建一个chrome扩展，并使用vue cli网页包配置。我希望在运行npm run build命令后能够使用vue devtools

我试图添加

Vue.config.devtools=true，或将
NODE_ENV:'生产'
更改为
NODE_ENV:'开发'
，但vue devtools仍然没有显示

如何在生产模式下启用vue devtools？
我似乎遇到了问题，因为我正在尝试在Chrome extension中使用vue devtools。不幸的是，无法使用vue devtools，因为扩展页面是通过chrome扩展提供的：//

进一步阅读：
首先，启用Chrome ext开发环境中的Vue开发工具

经验
这些天我在开发一个Chrome浏览器插件。我发现
\uu VUE\u DEVTOOLS\u GLOBAL\u HOOK\uu
未定义

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

例子：
1.打开
chrome-extension:///app.html

2.将
Vue.config.devtools
设置为true

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

但一切都不起作用。

解决方案
正如我们所知，
vue devtools
是vue生态系统的重要组成部分，但目前它与web浏览器绑定

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

此软件包名为
vue remote devtools
，它是一个独立的电子shell，用于远程调试vue应用程序

让我们试一试：

遵循
README.md
步骤

全局安装程序包：

npm安装-g@vue/devtools


在终端中运行：
vue devtools

你会看到一个电子应用程序像这样出现


3.将脚本标记插入Chrome扩展名
.html
文件

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

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

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

虽然您可以将
content\u security\u policy
复制到相应的文件
manifest.js
，但我仍然希望您能够了解CSP是什么：


最后
连接成功

参考：


文件顶部的Vue.config.devtools=true吗？还要检查AdBlock，我有一些问题