关于vue.js：如何在生产模式下为chrome扩展启用Vue devtools？


How to enable Vue devtools in production mode for chrome extensions?

我正在构建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？

相关讨论

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

经验

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

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

例：

1.打开chrome-extension:///app.html

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

3.grant Vue Devtools ext文件访问

但一切都不起作用。

解

众所周知，vue-devtools是Vue生态系统的重要组成部分，但目前已与Web浏览器绑定。

但是现在有一个软件包提供了一个独立的vue-devtools应用程序，无论环境如何，都可以使用它来调试任何Vue应用程序。现在，您可以调试在移动浏览器，野生动物园，本机脚本等中打开的应用程序，而不仅仅是台式机Chrome或Firefox。

该软件包名称为vue-remote-devtools，它是用于远程调试Vue应用程序的独立电子外壳！

让我们尝试一下：

按照README.md步骤，

  • 全局安装软件包：

    npm install -g @vue/devtools

  • 在您的终端中运行：vue-devtools

    您将看到这样的电子应用程序出现
    Electron Shell

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

    警告

    由于Chrome的插件内容安全政策(CSP)限制，Chrome扩展程序的网络请求可能会被阻止。

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

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

    尽管您可以将content_security_policy复制到相应的文件manifest.js中，但是我仍然希望您可以了解CSP是什么：

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

    最后

    连接成功！
    enter image description here

    参考：

    vue-远程-devtools

    用于Chrome扩展程序开发的DevTools。

    似乎有问题，因为我试图在Chrome扩展程序中使用vue devtools。不幸的是，由于扩展页面是通过chrome-extension：//提供的，因此无法使用vue devtools

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

    相关讨论