vue 生产环境开启 vue-devtools

因为在没有手动修改devtools/build设置的情况下,当npm run build执行时,vue项目环境默认配置如下

process.env.NODE_ENV === ‘production‘
Vue.config.devtools = false

所以导致很多使用vue框架开发的项目生产环境无法使用调试工具进行调试

自研项目可以手动开启生产环境的devtools,参考 vue-devtools

// 该配置需要放在import之后,new Vue执行之前才能生效
Vue.config.devtools = true

如何在不修改代码并重新打包发布的情况下开启vue-devtools呢?

1. 打开需要开启开发工具的网站,并进入F12开发者模式

2. 选择源码/Sources选项卡,找到当前项目的基础库所在的js文件,一般名称以app.开头,使用浏览器格式化工具,进行代码格式化

vue 生产环境开启 vue-devtools

3. ctrl + f全局搜索$mount或.config.productionTip,如果都找不到,就直接从new开始搜,一个一个查,直到找到真正的vue实例初始化入口

vue 生产环境开启 vue-devtools

4. 在new关键字所在的那一行打断点,并f5刷新进入该断点,拿到vue原型的配置对象

vue 生产环境开启 vue-devtools

5. 在控制台中将该值设为true

vue 生产环境开启 vue-devtools

6. 取消断点,关闭F12/开发者调试面板,再次打开F12即可看到vue菜单已经出来了

vue 生产环境开启 vue-devtools

vue 生产环境开启 vue-devtools

上一篇:response 响应流返回 header 返回 Content-Disposition ,前端拿不到


下一篇:把数据用poi导出为excel