qiankun框架实战总结：从微前端架构到跨应用通信的那些坑
树辰 Devqiankun框架实战总结
最近在项目中用了qiankun这个微前端框架，折腾了一阵子，总算有点心得。今天就来分享一下我在实际项目中的使用经验和踩坑经验。
我的写法，亲测靠谱
先说说最核心的部分，就是如何初始化和注册微应用。我一般这样处理：
import { registerMicroApps, start } from 'qiankun';
const apps = [
{
name: 'app1',
entry: '//jztheme.com/app1',
container: '#container',
activeRule: '/app1',
},
{
name: 'app2',
entry: '//jztheme.com/app2',
container: '#container',
activeRule: '/app2',
},
];
registerMicroApps(apps);
start();
这段代码看起来简单，但其实有几个关键点需要注意：
- entry：这是微应用的入口地址，可以是绝对路径或相对路径。我建议用绝对路径，这样可以避免一些路径问题。
- container：这是微应用挂载的容器，通常是一个DOM元素。我一般用一个全局的
#container来统一管理。 - activeRule：这是路由规则，用于匹配当前页面是否需要加载该微应用。我一般用路径前缀来匹配，比如
/app1。
这种写法的好处是配置简单明了，不容易出错。而且，如果将来需要添加或修改微应用，只需要修改apps数组即可。
这几种错误写法，别再踩坑了
当然，在实际开发过程中，我也踩了不少坑。下面是一些常见的错误写法，希望大家能避开：
错误1：直接使用相对路径
const apps = [
{
name: 'app1',
entry: './app1',
container: '#container',
activeRule: '/app1',
},
];
这种写法容易导致路径问题，特别是在多级目录结构下。建议大家尽量使用绝对路径。
错误2：没有正确配置publicPath
// webpack.config.js
module.exports = {
output: {
publicPath: '/',
},
};
如果你的微应用是通过webpack打包的，一定要正确配置publicPath。否则可能会导致资源加载失败。我之前就因为这个问题搞了半天，最后才发现是publicPath配置有问题。
错误3：忽略了sandbox配置
registerMicroApps(apps, {
sandbox: true,
});
默认情况下，qiankun会开启沙箱模式，防止微应用之间互相影响。但是有时候你可能不需要沙箱模式，或者需要自定义沙箱配置。这时候就需要显式地设置sandbox选项。忽略这个配置可能会导致一些奇怪的问题，比如样式冲突等。
实际项目中的坑
除了上面提到的一些常见错误，还有一些实际项目中遇到的坑。这些坑可能不会在文档中详细说明，但却是非常重要的。
跨域资源共享（CORS）问题
在微前端架构中，不同微应用可能部署在不同的域名下，这就涉及到跨域问题。为了解决这个问题，我一般会在后端配置CORS头，允许来自特定域名的请求。比如：
Access-Control-Allow-Origin: https://jztheme.com
另外，也可以在前端通过代理服务器来解决跨域问题。比如用nginx做反向代理：
server {
listen 80;
server_name jztheme.com;
location /app1 {
proxy_pass http://localhost:3000;
}
location /app2 {
proxy_pass http://localhost:4000;
}
}
这样就可以让微应用通过同一个域名访问到各自的后端服务。
样式冲突问题
微前端架构下，多个微应用共用同一个HTML文件，很容易出现样式冲突。为了解决这个问题，我一般会给每个微应用加上唯一的命名空间前缀。比如：
/* app1.css */
.app1-class {
color: red;
}
/* app2.css */
.app2-class {
color: blue;
}
这样可以有效避免样式冲突。当然，如果你有更复杂的样式需求，也可以考虑使用CSS模块化或者BEM命名规范。
数据共享问题
微前端架构下，主应用和微应用之间需要共享数据。我一般使用qiankun提供的initGlobalState方法来实现。比如：
import { initGlobalState } from 'qiankun';
const initialState = {
user: { name: 'John' },
};
const actions = initGlobalState(initialState);
// 在微应用中订阅状态变化
actions.onGlobalStateChange((state, prev) => {
console.log(state, prev);
});
// 修改全局状态
actions.setGlobalState({ user: { name: 'Jane' } });
这种方法可以方便地在主应用和微应用之间共享数据。但要注意，不要滥用全局状态，否则可能会导致状态管理变得复杂。
结尾
以上是我总结的qiankun框架的最佳实践和踩坑经验。希望对大家有所帮助。如果有更好的方案，欢迎在评论区交流。以后有机会我会继续分享更多关于微前端的经验。
暂无评论