你不知道开启vue-devtools的方式

需求

主要都是为了调试使用，定位问题

问题

线上测试可以通过在打包前设置是否开启devtools， 但是在真正环境的时候是不开启的，但是问题往往是需要在生产环境上定位，那么针对不同环境与场景我们怎么去开启呢？

测试环境

• vue2

src/main.ts

import vue from 'vue';

// 具体环境设置是否开启
vue.config.devtools = true

生产环境，可以通过设置vue.config.devtools来控制

• vue3

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    // 具体环境设置是否开启
     __VUE_PROD_DEVTOOLS__: true
  }
});

vue3已经废弃config.devtools，解决的方法

正式环境

结合浏览器的Overrides的面板功能，进行开启devtools功能

vue2

• vue2的inline模式

找到创建app应用实例的位置,找到vue对应的引用：

c['default'].config.devtools = true

• vue2的externals模式

注意：

设置之后，记得重新关闭再打开开发工具控制台

vue3

说起惭愧，多次试过通过设置 VUE_PROD_DEVTOOLS 无法成功，有哪位大佬知道，请在评论区告知！

最后

每天分享一个小技巧，摸鱼时间就多一点点