简介
简化
vite子应用接入qiankun的流程
快速开始
1. 安装 vite 插件
// vite.config.ts
import qiankun from '@sh-winter/vite-plugin-qiankun'
import { name as packageName } from './package.json'
export default {
base: `/${packageName}/`
plugins: [
qiankun({ packageName })
]
}
2. 导出 qiankun 生命周期钩子
// main.ts
import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
// some code
function render(root: Element | Document = document) {
app = createApp(App)
app.mount(root.querySelector('#app'))
}
exportLifeCycleHooks({
bootstrap() {
// do nothing.
},
mount(props: { container: Element }) {
render(props.container);
},
unmount() {
app?.unmount();
}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
render();
}3. 注意事项
-
es module会导致qiankun沙箱失效，如果想要访问qiankun提供的代理window，请使用qiankunWindow
import { qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'- 如果是
vue子应用，开发环境下需要额外引入vue-template-compiler transform插件：transformAssetUrl
// vite.config.ts
import qiankun, { transformAssetUrl } from '@sh-winter/vite-plugin-qiankun'
export default {
// ...
plugins: [
vue({
template: {
compilerOptions: {
nodeTransforms: [transformAssetUrl as any]
}
}
}),
qiankun({ packageName })
]
}查看示例
yarn example