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/;
}

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

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

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

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

解决方法:在子应用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
}

备注

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

你可能感兴趣的:(前端,前端框架,wujie)