子应用 - 干净演示
此为简单的基于elementUI的页面，加入qiankun，作为vue-element-admin-qiankun的子站点使用的最佳实践。主要是便于大家更好的拆解子应用，了解子应用如何嵌入到主应用中的。
此章节的子应用已经安装了qiankun，并接入了主应用，其源码: micro-qiankun
TIP
干净演示子应用预览地址: cos.icegl.cn/vue-son/index#/index
子应用改造步骤：
安装 qiankun ：
yarn add qiankun # 或者 npm i qiankun -S
main.js 初始化 :
在src/main.js中增加了：
if (window.__POWERED_BY_QIANKUN__) {
// 关联引用资源路径
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
} else {
render()
}
export async function bootstrap(props) {
console.log('documentation这里暂时可以什么都不用做，但方法必须要导出', props)
}
export async function mount(props) {
console.log('mount', props)
if (props) {
//把 qiankun 的props 挂载到全局变量
window.qiankunProps = props
}
render(props) // 从qiankun启动
}
export async function unmount(props) {
console.log('unmount', props)
instance.$destroy() // 销毁子应用实例 instance 为之前的 VUE实例
}
打包配置修改 :
在vue.config.js中修改：
module.exports = {
publicPath: './', // 如果是部署状态 最好把地址改正线上对应的目录
devServer: {
headers: {
'Access-Control-Allow-Origin': '*', // 默认支持跨域
},
},
configureWebpack: {
output: {
library: 'xxx-name',
libraryTarget:'umd' // 把微应用打包成 umd 库格式
},
},
}