微应用/主应用前提下,多个VUE项目共存,在特定情况下会导致$router undefined的问题
背景
主应用和子应用都是Vue,并且主应用通过CDN externals进行了项目优化。子应用报错,提示$router 不存在。无法被加载
原因
主应用cdn引入的vue,会把Vue挂载到window里。
在子应用引入时,会进行一个判断,window.Vue是否存在,不存在才会加入自身的Vue
同时router会被挂到主应用的window上。而子应用vueRouter在自身的window global上无法正常获得,导致加载错误。
不可接受的解决方案
放弃所有主应用cdn引入,降低项目性能,如vue vuex vue-router element-ui等。
结论
避免主子应用都是Vue项目。
ps:主子都是React时,没有此影响
替换方案:使用其他项目嵌入式方案对待这种双Vue项目,如iframe内嵌;link 打开新浏览器tab等。