主应用为react(webpack)项目,子应用为vue3(vite)搭建
接入过程中有一些小坑记录下
思路
vit-plugin-qiankun插件,具体用法
重复刷新
dev环境,进入vite子项目,无限刷新
解决方法:设置hmr
server: {
port: 80,
host: "dd-data-local.com",
// strictPort: true,
hmr: {
host: "dd-data-local.com",
port: 80
}
},
路由问题
注意和react项目引入方式的差异
两点注意:
- 不用设置 base
- 子路由表改造,根路由用主应用中设置的activeRule
完整示例:
main/render
function render(props) {
const { container } = props;
instance = createApp(App);
let router = null;
const history = createWebHashHistory();
router = createRouter({
history,
routes: routeList
});
instance
.use(Antd)
.use(router)
.use(store)
.use(VueBlocksTree, defaultoptions)
.mount(
container
? container.querySelector("#root")
: document.getElementById("root")
);
}
routerList
const routeList = [
{
path: "/dataCenter",
name: "Home",
component: () => Home,
redirect: "/dataCenter/list",
children: [
{
name: "list",
path: "list",
component: () => import("../pages/MetaDataManager/index.vue")
},
{
name: "detail",
path: "detail",
component: () => import("../pages/MetaDataManager/Detail.vue")
}
]
}
];