我正在构建一个chrome扩展，并使用vue cli网页包配置.我希望在运行npm run build命令后能够使用vue devtools.
我试着在main中添加Vue.config.devtools = true;.js，或将NODE_ENV: '"production"'更改为NODE_ENV: '"development"'，但vue devtools仍然没有出现.
如何在生产模式下启用vue devtools？
推荐答案
首先，在启用Chrome ext开发环境的情况下，使用Vue devtools.
Experience
这些天我正在开发一个Chrome浏览器插件.我发现__VUE_DEVTOOLS_GLOBAL_HOOK__个未定义.
虽然不是大问题，但我想解决它.我在网上搜索了很多信息.
例子:
1.开chrome-extension://<hash>/app.html
2.设定Vue.config.devtools为真
3.授予Vue Devtools外部文件访问权限
but all doesn't work.
Solution
正如我们所知，vue-devtools是Vue生态系统的一个重要组成部分，但它目前与web浏览器绑定.
但现在有一个软件包提供了一个独立的vue devtools应用程序，可以用来调试任何vue应用程序，而不管环境如何.现在，你可以调试在移动浏览器、safari、原生脚本等中打开的应用程序，而不仅仅是桌面chrome或firefox.
这个包名是vue-remote-devtools，这是一个独立的electron shell，用于远程调试Vue应用程序！
让我们试一试:
按照README.md个步骤，
全局安装程序包:
npm install -g @vue/devtools在你的终点站 run :
vue-devtoolsyou will see a electron app appear like this
3.将脚本标签插入Chrome扩展名.html文件.
Warning
由于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是什么:
What is Content Security Policy (CSP)
Finally
Connect Success！
裁判:
Vue.js相关问答推荐
Vuetify 3 改变 Select 的 colored颜色
在 Nuxt3 中使用 Vue3 vue-ganntastic 插件
点击屏幕的任何位置都会禁用v-overlay
将 v-calendar 与以时间和日期格式出现的事件一起使用
Vue 3 如何通过多个组件传递插槽
在 v-for 中定义变量有什么问题吗？
为什么普通对象在 Vue3 中自动变成响应式的？
单击 v-data-table 中行中的任意位置并移动到另一个页面
vue.js 在 App.vue 中获取路由名称
Vuex 和 Event Bus 有什么区别？
判断 vue-router.beforeEach 不限制对路由的访问
vuex： unknown getter： user
如何从 vue.js 中的自定义组件中冒泡点击事件？
Vue-test-utils：在单个测试中多次使用 $nextTick
Vue router路由，Root Vue 没有数据？
如何从 v-for 创建的对象中绑定多个类？
try 通过 Vue.js 中的渲染传递props并观察它们
Vuetify 数据表不显示数据
使用 CloudFront 部署在 S3 上的 VueJS 应用程序的指定的密钥不存在
如何订阅store 模块
实用课程推荐