我正在开发一个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?
我正在开发一个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?
首先,在 Chrome 扩展程序开发环境中使用 Vue devtools。
这些天我在开发一个 Chrome 浏览器插件,但是发现 __VUE_DEVTOOLS_GLOBAL_HOOK__
未定义。
虽然不是什么大问题,但我想解决它。我在网上搜索了很多资料。
1.打开 chrome-extension://<hash>/app.html
2.将 Vue.config.devtools
设置为 true
3.授权 Vue Devtools 扩展文件访问权限
但都没有起作用。
我们知道,vue-devtools
是 Vue 生态系统中必不可少的一部分,但它目前只能在 Web 浏览器中使用。
但现在有一个包提供了一个独立的 vue-devtools 应用程序,用于调试任何 Vue 应用程序,而无论其所在的环境如何。现在你可以调试你在移动浏览器、Safari、Native Script 等中打开的应用程序,而不仅仅是桌面版的 Chrome 或 Firefox。
这个包的名字叫做 vue-remote-devtools
,它是一个独立的 Electron Shell,用于远程调试 Vue 应用程序!
让我们来试试:
按照 README.md
中的步骤:
3.将脚本标签注入到 Chrome 扩展程序的 .html
文件中。
由于 Chrome 对插件的内容安全策略 (CSP) 限制,Chrome Extension 的 Web 请求可能会被阻止。
此时,你需要修改 Chrome 扩展程序的配置文件 manifest.js
。
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
虽然您可以将content_security_policy
复制到相应的文件manifest.js
中,但我仍希望您能了解CSP是什么:
参考资料:
manifest.js
文件? - Ahmed Mamdouhchrome-extension://
提供服务的,所以无法使用Vue开发工具。