2021-07-27微前端ali-qiankun2.4.3体验

参考：
qiankun官网
基于qiankun的微前端实践

体验技术栈 vue2-cli4,vue3-cli4，,vue3-vite,three.js
vue3-vite,2.4.3不支持子应用，支持基座（据说是摇树优化把无用配置筛掉了）
然后会提示这个错误：

出现这个问题也不要慌，这个是刷新页面的时候资源错误。是配置路径不对导致的，根据路由模式配置publicPath然后重启。vite不用重启还是很方便的，就是在乾坤里面子应用用不了。

前言

在开始demo之前，建议先看完vue微应用项目实践，再看入门教程。demo描述相当简单，但是实际操作才会发现有些坑在过程中。

首先一定要提前确定路由模式，是要选择hash还是history？后续的打包配置和路由跳转方式会紧密关联。其次是建议学习的时候不要用简单的文字demo去测试，不然很难发现关于图片加载和第三方插件使用时在微前端框架中的差别。（以vue-cli4为例，当前框架的静态资源放在assets里面，公共资源放在public里面。否则独立运行正常，在qainkun访问路径404）

一、hash模式

主应用和子应用都使用hash路由模式，目前一切正常，路由跳转正常。子路由使用history路由时匹配不到路径。
目前遇到的问题，子应用使用第三方插件或绑定window对象方法可能报错。
注意事项：
1、hash路由匹配时需要用父级路由匹配基座路由；
2、打包配置需要将publicPath设置为‘’或者‘./’（表示相对路径），否则单独访问没问题，基座访问则访问不到静态资源。除非指定静态资源打包路径

const publicPath =
  process.env.NODE_ENV === "production"
    ? "http://localhost:8001"
    : `http://localhost:8081`;
...

module.exports={
   
//vue-cli4默认只打包默认规则下的图片或其他静态资源，我使用svga文件完成require请求时若不添加规则则不会识别。
//如果设置publicPath:''||'./'则不需要在下方options设置publicPath
chainWebpack: (config) => {
   
    config.module
      .rule("fonts")
      .use("url-loader")
      .loader("url-loader")
      .options({
   
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
   
          loader: &#