开始

一键安装所有主子应用的依赖

npm i

一键启动所有所有应用

npm start

通过 http://localhost:8080/ 访问主应用。

需要注意的坑

1. 父应用常规配置vite和乾坤没啥讲的

2. 子应用配vite-plugin-qiankun, main里面也要使用

3. 图片加载失败?? 因为vite的代码没有经过打包,所以不会自动加上域名,在父应用就看到图片挂了!!!百度也查不出个123, 甚至想用axios请求图片吧,看又不是常规vue写法了,不至于吧!!最后仔细又看了一遍配置文档,发现可以配置config.base,指定vite服务域名, 当基座打开浏览时,依然挂的是子应用域名,有时候base还是不生效,这里采用的是图片资源直接放到public里面, 引用图片时加个window.ORIGIN, 这个值是mian里面初始化过的,所有前缀都加上,这样子基座里面请求的图片是子应用带上的

4. 路由跳转出错? 这个也是我粗心,复制别人的 window.POWERED_BY_QIANKUN 然后路由死活不行, 最后看文档要写成qiankunWindow.POWERED_BY_QIANKUN

5. 子应用跳转vue3Vite/vue ,什么鬼?路由叠加? 抓狂,原来是unmount里面漏写了history.destroy()

6. axios请求时, 需要主工程也配置相应代理, 否则请求会出现404, 因为开发环境下是主工程做的代理替换

7. 加载子应用的某一个路由? 怎么设定? 在测试过程中, 好几个小时的尝试都是在registerMicroApps 时, 如果name 和activeRule 不匹配时, 就不能进行模板替换,

• name（子应用的名称） 这个好理解, 比如我的子应用叫dash(随意), 后面dash里面的其他路由都会挂在这个后面

• activeRule（子应用的激活规则） /dash/index, 路由命中后,跳转/dash/index路由, 想法很不错, 但是事与愿违, 不出意外跳进去没有问题, 但是当点击该子应用其他按钮跳转路由时就有问题了,跳完页面就被卸载了......为什么会这样子呢? 因为路由匹配机制, /dash/index 和 /dash/view 它会认为不匹配, 直接就卸载了微应用, 但如果我就命名为 /dash 那么/dash/index和/dash/view 它会认为是同一个微应用

• props（主应用需要传递给子应用的数据）

父子组件传值

之前demo的传值,是主工程下发到main里面的, 压根不能在vue组件里面使用, 我也看了别人一些写法, 大多是有在子工程里面, 又建一个方法, 这样子其实是冗余的

主子工程的通信格式肯定是要一致的, 否则就是鸡同鸭讲话, 既然一样那么方法直接定义到主工程里面, 格式也由主工程定义就好了, 派发给子工程用

子工程在main里面接收, 然后作为方法,直接挂在到全局,Vue.prototype.$qiankun=props, 子应用的vue页面通过 （vue2） this.$qiankun可以获得所有方法, 然后进行操作,vue3与react类似

增加自适应模式，防止在不同分辨率下产生的布局错乱或样式不统一的问题。具体使用方法在 common-src-autoFit下