wujie初使用--部署篇

背景

新起了项目，决定使用微前端技术，最终框架确定使用wujie。（微前端基础知识和框架对比选取，网上很多例子，不做赘述）
根据文档和网上已有资料，很轻易的在本地起来了项目，但是在部署到线上后，出现了问题且在网上没有找到解决的办法，现将遇到的问题和我的解决方法记录如下。
主应用和子应用都是vite4 + vue3

问题-方法

问题1： 主应用和子应用部署在不同的服务，主应用获取子应用index.html会报跨域。

在主应用hostMap文件中，最初是把本地对应的地址直接写成了子应用的服务器地址，就会报跨域。

解决方法：将子应用配置成和主应用相同的域名。

如：主应用是zhuyingyong.dev.demo.com，
那么hostMap可以配成：‘//localhost:8082/': '/zhuyingyong.dev.demo.com/ziyingyong/’，
然后在主应用部署的服务器nginx中配置如下代理，子应用的nginx也要正常配置Access-Control-Allow-Origin等跨域相关内容

location /ziyingyong/ {
   proxy_pass https://ziyingyong.dev.demo.com/;
}
1
2
3

问题2：获取子应用index.html后，获取其中的js和css文件，会提示404

因为是新项目，在子应用的vite.config.js中未配置base（默认值是’/'），因此在打包之后，index.html中的js和css文件路径类似如下：

src="/assets/index.1241sdf.js"
href="/assets/index.zcxvqwer.css"
1
2

由于子应用挂在主应用下，所有的请求都是主应用发起，所以这种路径会在主应用的服务器去找这两个文件。

解决方法：在子应用vite.config.js中配置base: “./”

问题3：解决以上两个问题后，子应用资源能够正常加载，但是主应用会卡住，直到卡崩浏览器

这个问题困了我1天半的时间，此时你会发现，控制台不报错，资源也不跨域，但是浏览器就是卡住了。后来灵光一现，在wujie文档中看到了preloadApp的警告：资源的预执行会阻塞主应用的渲染线程。

解决方法：主应用的main.ts中的setupApp和preloadApp，url就传个’’

问题4：解决以上3个问题，线上能跑起来了，子应用配置在root中的css不生效

因为子应用挂在主应用上后，:root就变成了主应用的，所以子应用的样式不再生效

解决方法：使用主应用setupApp子应用的plugins属性中的cssLoader，代码如下：

cssLoader: (code: string) => {
	const rootStyleReg = /:root/g
    const hostStyleReg = /:host/g
    let newCode = code
    newCode = newCode.replace(rootStyleReg, ':host').replace(hostStyleReg, ':host html')
    return newCode
}
1
2
3
4
5
6
7

备注

主应用使用接口目前正常，没有什么异常错误，子应用还未到调接口阶段，是否隐藏什么问题，还未发现，如有发现，后续再发