乾坤子应用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; 我真要崩溃了...
image

4、由于vue2.min.js更换为vue2.js, 导致了很多的vue报错得以显现,消除绝大部分的错误和告警,才能让项目更加稳定;
但是我作为小小外包,肯定不会去贸然处理的,1来子应用多,2来凡事得有流程,没有理由拉个分支单独该报错;还是等到某些功能提缺陷,我再走流程处理;

posted @ 2025-07-10 15:13  Math点PI  阅读(76)  评论(0)    收藏  举报