乾坤子应用vue2-不展示devtools工具
1、父应用设置devtools = true也不生效;
原因: 开发和线上使用的都是vue.min.js, 更换到vue.js就展示乾坤基座的devtools了;
vue.config.js配置了外部cdn加载,所以这块我直接在index.html加载vue2.js文件; 除此方法之外,好的方式应该是生产环境才使用externals,开发环境要用node_modules依赖;
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
"ant-design-vue": "antd",
axios: "axios",
moment: "moment",
echarts: "echarts",
"element-ui": "ELEMENT"
},
2、换了vue.js后,子应用还是不展示:
解决方案: 在子应用render后,把子应用的instance挂载到devtools的div上;
if (process.env.NODE_ENV === "development") {
// vue-devtools 加入此处代码即可
let instanceDiv = document.createElement("div");
instanceDiv.id = "vueDevtools";
instanceDiv.__vue__ = vueInstance;
document.body.appendChild(instanceDiv);
Vue.config.devtools = "source-map";
}
3、子应用debugger代码看存在,但是实际不会在对应位置上断点,这个问题困扰了我略久,就连debugger那行代码我都能看到;
原因:浏览器调试工具设置了忽略(居然还有这种操作),导致不走debugger; 我真要崩溃了...

4、由于vue2.min.js更换为vue2.js, 导致了很多的vue报错得以显现,消除绝大部分的错误和告警,才能让项目更加稳定;
但是我作为小小外包,肯定不会去贸然处理的,1来子应用多,2来凡事得有流程,没有理由拉个分支单独该报错;还是等到某些功能提缺陷,我再走流程处理;
本文来自博客园,作者:Math点PI,个性签名:“不写bug怎么进步?”,转载请注明原文链接:https://www.cnblogs.com/MrZhous/p/18976926

浙公网安备 33010602011771号