问题1.本地开发时,在主应用页面刷新会直接变成微应用页面,配置如下:
registerMicroApps([
{
name: 'app1',
entry: '/app1/', // http://localhost:8080/app1/
container: '#container',
activeRule: '/app1',
},
],
分析:由于entry和activeRule相同导致
解决方案:将activeRule改为主应用访问微应用的baseUrl
entry为微应用部署地址;activeRule为主应用使用 location.pathname
区分微应用
问题2:主应用、微应用部署在不同的服务器上,微应用更新后,浏览器读取缓存问题
解决方案:服务器需要给微应用的 index.html
配置一个响应头:Cache-Control no-cache
,意思就是每次请求都检查是否更新。
以 Nginx
为例:
location = /index.html {
add_header Cache-Control no-cache;
}
问题3:主应用、微应用部署在不同服务器上,主应用读取不到微应用静态资源文件,读取的时主应用的静态资源文件
解决方案:
对于 webpack
构建的微应用,微应用的 webpack
打包的 publicPath
需要配置成 /app1/
,否则微应用的 index.html
能正确请求,但是微应用 index.html
里面的 js/css
路径不会带上 /app1/
。
module.exports = {
output: {
publicPath: `/app1/`,
},
};