vue3 中 vue-devtools 面板不显示的问题

今天在跑 vue3 项目的时候发现它并没有将 vue-devtools 调试工具开起来,于是就去官网查询。

https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up

解决方案

解决方案是修改一个环境变量 __VUE_PROD_DEVTOOLS__,它默认是 false,需要改为 true 来打开。

__VUE_PROD_DEVTOOLS__ (enable/disable devtools support in production, default: false)

对于 vite 构建的项目(一般都是用的 vite),可以使用使用 define 选项.

// vite.config.js
export default defineConfig({
  ...
  define: {
    __VUE_PROD_DEVTOOLS__: true,
  },
})

最后,重启浏览器再查看效果。就可以看到调试面板如期而至。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容