乾坤微前端问题汇总

1. 子项目(vue3+vite)挂载主应用失败

解决： 修改 vite.config.js 的 base 配置。

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())
    const baseMap = {
      'development': `/${name}/`,
      'test': `https://test-hwork.haier.net/${name}/`,
      'staging': `https://pre-hwork.haier.net/${name}/`,
      'production': `https://hwork.haier.net/${name}/`
    }

    let config = {
        base: baseMap[env.VITE_NODE_ENV],
        ...... 省略不相关的代码
    }

    return config
})

2. 不同的子项目页面之间跳转失败

使用vue-cli构建的项目，不同的子应用，打包部署完后，跳转失效。

解决：
(1) 修改vue.config.js文件；
(2) 修改router.js，不要用懒加载方式加载组件。

3. 子应用获取不到主应用传递过来的store

修改子应用main.js的mount方法

export async function mount(props) {
  props.onGlobalStateChange &&
    // props.onGlobalStateChange()方法是用来监听主应用传值，obj是在主应用action.js中初始化的对象值，当主应用调用setGlobalState()方法改变值的时候，在这里都可以监听到最新的值
    (await props.onGlobalStateChange(async(obj) => {
      if (obj.userInfo.userCode && obj.limitsList && obj.limitsList.length > 0) {
        render(props)
      }
    }, true))
}