基于vue-typescript-admin-element的微前端中后台应用

本项目是对vue-typescript-admin-element中后台框架的改造，使用微前端框架qiankun将原有的完成单页应用一个独立的子应用切分。技术栈介绍vue-typescript-admin-element框架是业界广泛使用的vue-admin-element框架的typescript版本。Qiankun是在single-spa微前端框架的基础上重新封装的一个更易用的微前端框架。在single-spa的基础上，增加了js沙箱，html的加载和解析。主应用所谓主应用是所有子应用的容器，用来渲染子应用的轮廓。main.tsimportVuefrom'vue'import'normalize.css'importElementUIfrom'element-ui'importSvgIconfrom'vue-svgicon'import'@/styles/element-variables.scss'import'@/styles/index.scss'importAppfrom'@/App.vue'importstorefrom'@/store'importrouterfrom'@/router'import'@/icons/components'import'@/permission'importQiankunVuefrom'@/plugins/qiankun-vue'Vue.use(ElementUI)Vue.use(SvgIcon,{tagName:'svg-icon',defaultWidth:'1em',defaultHeight:'1em'})//插件加载Vue.use(QiankunVue)constqiankunVue=newQiankunVue([{name:'dashboard',entry:'//localhost:5001',activeUrl:'/dashboard'},{name:'example',entry:'//localhost:5002',activeUrl:'/example'}])Vue.config.productionTip=falsenewVue({router,store,qiankunVue,render:(h)=>h(App)}).$mount('#main')在这个项目中，已经打包qiankun变成一个标准的vue插件。实例化时需要传入子项目的注册信息。framework.vue用于渲染子项目容器子应用vue-dashboard和vue-example是两个子项目，主要变化是vue.config.js和main.ts的变化。vue.config.jsconstpath=require('path')const{name}=require('./package')constcors=require('cors')constport=5002module.exports={devServer:{port,/*headers:{'Access-Control-Allow-Origin':'*',},*/before(app,server){app.use(cors())}},publicPath:process.env.NODE_ENV==='生产'？'/vue-typescript-admin-template/':`//localhost:${port}`,//TODO:请记住更改它以满足您的需要lintOnSave:process.env.NODE_ENV==='development',pwa:{name:name},pluginOptions:{'style-resources-loader':{preProcessor:'scss',patterns:[path.resolve(__dirname,'src/styles/_variables.scss'),path.resolve(__dirname,'src/styles/_mixins.scss')]}},/*configureWebpack:{output:{//把子应用打包成umd库格式library:`${name}-[name]`,libraryTarget:'umd',jsonpFunction:`webpackJsonp_${name}`,}},*/chainWebpack(config){//在webpack的名称字段中提供应用程序的标题，以便//它可以在index.html中访问以注入正确的标题。config.set('name',name)config.plugin("html").tap(args=>{args[0].minify=false;returnargs;});//将子应用打包成umd库格式config.output.jsonpFunction(`webpackJsonp_${name}`).library(`${name}-[name]`).libraryTarget('umd')}}devServer:Services这种开发模式需要允许跨域请求，因为在微前端项目中，子项目通常是独立部署在一个独立的域名服务下，父项目拉取子项目资源时，都是跨域访问.虽然在生产环境中可以通过配置反向代理等方式避免跨域访问，但是在开发环境中直接开启跨域访问是最简单的。publicPath：需要配置全域名访问。因为，子项目在运行的时候，会加载很多异步资源，比如css和异步组件加载等，如果配置相对路径，会导致在运行时访问父项目的域名子项目加载资源，导致资源加载失败。到达。umd打包配置：子项目必须以umd打包输出，否则qiankun框架无法正确解析。main.tsimportVuefrom'vue'import'normalize.css'importElementUIfrom'element-ui'importSvgIconfrom'vue-svgicon'import'@/styles/element-variables.scss'import'@/styles/index.scss'importAppfrom'@/App.vue'importstorefrom'@/store'importrouterfrom'@/router'import'@/icons/components'import'@/permission'Vue.use(ElementUI)Vue.使用(SvgIcon,{tagName:'svg-icon',defaultWidth:'1em',defaultHeight:'1em'})Vue.config.productionTip=falseletapp:Vue|undefined=undefinedexportasyncfunctionbootstrap(){console.log('示例应用初始化')}/***每次应用进入都会调用mount方法，通常我们在这里触发应用的渲染方法*/exportasyncfunctionmount(props:any){Vue.prototype.$isFramework=props.isFrameworkVue.prototype.$mainApp=props.mainInstanceif(!app){app=newVue({router,store,render:(h)=>h(App)})}app.$mount('#app')props.callback(app)}/***每次应用切换/卸载时都会调用的方法，通常这里我们会卸载子应用的应用实例*/exportasyncfunctionunmount(){控制台.log('exampleappuninstall')//Destroyif(app){app.$destroy()app=undefined}}mount函数：当子项目加载时会调用该函数。所以vue需要在实例化这个函数的时候实现。unmount函数：文件子项目切换时，需要销毁当前项目。项目地址：https://github.com/Hades-li/vue-ts-admin-microApp