简化
vite
子应用接入qiankun
的流程
// 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 })
]
}
// 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();
}
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 })
]
}
cd example
yarn
# 启动主应用(react)
yarn run:main
# or
yarn run:main-build
# 启动子应用(vue3)
yarn run:micro
# or
yarn run:micro-build