qiankun项目踩坑

本来是可以用菜单路由完成的，但是引入了qiankun框架，学习了新技术的同时也花了不少时间死磕。

1. 打包配置
   这个在官方的常见问题中有提到，一般按照步骤来即可。
   不过我用的图片是svg，而rule('images')是不包括svg的，之前看webpack的文档记得图片都是一个test匹配的，下意识认为images也包含svg。
   可以通过命令行npx vue-cli-service inspect --mode production >> webpack.config.production.js来查看最终的配置输出，开发环境换成development。这里面就明确是jpg归一类，svg单独一个loader。
   但是又又出问题了，从网上找了个vue-svg-loader，结果打包出来url是[object object]。
   最后是在images的rule里加了test匹配svg格式解决。

const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      });
  },
};

还有一点是publicPath，这里是对开发生产环境进行区别，并且如果打包配置了publicPath，需要在后面都加上publicPath。

2. 组件挂载
   微前端的实际渲染结构类似于iframe，主应用+子应用的结构就是main#app > ... > sub#app，如果子应用里用到了类似message、select、modal等组件，其挂载的默认节点是body，就会出问题，因为子应用的组件样式是影响不到主应用的，除非主子应用用的是一套组件库（我觉得这很合理），然而我做的子项目是用的antd，而主应用是elementUI，主要理由是UI设计，不详述了。总之如果出现了这种问题，解决方法就是修改默认的挂载dom，一般组件都有这个属性，修改为子应用的最外层即可。有两点需要注意：
   1） 默认主子应用容器都是#app，用#app取的是主应用容器，要与主应用中的id/class不一样
   2） message在js中挂到Vue的原型上是可以加配置的，其中就有挂载dom配置，但是main.js执行的时候子应用是没有加载出来的（dom未渲染），所以选择不到dom。这个就与主应用的message保持一致就行了。
   一般来说主子应用用同一套组件库是没这些问题的，偏偏遇到了特殊情况。
3. 还有一个子应用使用了路由，在主应用中报错的问题，未解决。