我正在构建一个 chrome 扩展，并使用 vue-cli webpack 配置。我希望在运行npm run build命令后能够使用 vue devtools 。
我尝试添加Vue.config.devtools = true;main.js，或更改NODE_ENV: '"production"'为NODE_ENV: '"development"'，但 vue devtools 仍然没有出现。
如何在生产模式下启用 vue devtools？
问问题
32612 次
2 回答
17
首先，在 Chrome ext 开发环境中使用 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步骤，
全局安装包：
npm install -g @vue/devtools在您的终端中运行：
vue-devtools你会看到一个像这样的电子应用程序
3.将脚本标签注入您的 Chrome 扩展.html文件。
警告
由于 Chrome 对插件的内容安全策略 (CSP) 限制，Chrome 扩展程序的 Web 请求可能会被阻止。
此时需要修改 Chrome Ext 配置文件manifest.js。
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
虽然可以复制content_security_policy到对应的文件manifest.js中，但是还是希望大家能搞清楚CSP是什么：
最后
连接成功！
参考：
于 2018-03-27T18:46:24.237 回答
1
看起来我遇到了问题，因为我正在尝试在 Chrome 扩展中使用 vue devtools。不幸的是，无法使用 vue devtools，因为扩展页面是通过 chrome-extension://
于 2017-06-27T10:30:27.300 回答