背景

由于公司业务的发展导致项目工程越来越大, 故决定对项目进行业务功能划分, 将大项目拆分成几个小项目, 再整合到一起。由此想到了微前端的架构，参考了市面上的几大框架之后，最终决定使用qiankun对项目进行改造。

配置

根据API上的指南进行调整后，发现启动的时候会报错，百度上也没啥小伙伴遇到跟我一样的问题，故非常疑惑。最终在小伙伴的帮助下，终于找到了问题点。记录下来以备后续参考。

因为用的都是同一套组件库, 同一套UI, 故没有使用沙箱功能
路由均采用hash模式

问题列表

问题一: 运行异常

package.json中的name不是唯一导致, package.json 的 name 保持跟主应用注册子应用的时候 name 一致, 不能是包含关系, 比如: aa 和 aab 这种是不可以的, 可以是 ab, ac

问题二: 数据通信

主应用传入store给子应用, 获取store中某个值的时候, 会发现有延时, 在下次变更的时候取的是上一次的值, 目前采用解决方法是使用 qiankun 的 actions 进行传值

配置参考: blog.csdn.net/wanghe1111_…

问题三: fonts文件/图片丢失

在 vue.config.js 中的 chainWebpack 增加文件打包处理

// 文件处理 -- 微应用打包之后 css 中的字体文件和图片加载 404
const filePath = process.env.NODE_ENV === 'production' ? '服务器地址' : '../';
config.module
  .rule('fonts')
  .use('url-loader')
  .loader('url-loader')
  .options({
    limit: 4096, // 小于4kb将会被打包成 base64
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[hash:8].[ext]',
        publicPath: filePath,
      },
    },
  })
  .end();
config.module
  .rule('images')
  .use('url-loader')
  .loader('url-loader')
  .options({
    limit: 4096, // 小于4kb将会被打包成 base64
    fallback: {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]',
        publicPath: filePath,
      },
    },
  });

记qiankun踩坑之路

背景

配置

问题列表