微前端就是将不同的功能按照不同的维度拆分成多个子应用，通过主应用来加载这些子应用，比如将多个模块拆分出来，不同的团队都可以独立开发，不受技术栈的限制，每个子应用都是独立的，最终将子应用打包成一个个lib文件，切换路径时加载不同的子应用。 **常用的方法**：single-spa框架（没有做样式隔离），iframe（切换路径显示问题），qiankun框架 npm安装 `npm i qiankun -S` 使用： ``` 1.在主应用main.js中注册微应用，在app.vue中添加子应用的标识 app.vue中： <template> <div id="app"> <router-view/> <div id="#vue"></div> </div> </template> main.js中： import { registerMicroApps, start } from 'qiankun'; const apps = [ { name : 'vueApp',//子应用名称 entry : '//localhost:10000',//请求的端口号，默认会加载，动态的执行，子应用必须支持跨域 container : '#vue',//子应用的id activeRule : '/vue',//激活的规则，当访问/vue时加载 props : {a : 1},//传递参数到子组件 } ] registerMicroApps(apps);//注册 start({ prtfetch : false //取消预加载 });//开始执行 ```  ``` 2.在子应用中返回3个方法 let instance = null ; function render(){ instance = new Vue({ router, render: h => h(App) }).$mount('#app') //这里挂载到自己的html中，主应用会拿到这个挂载后的html，将其插入进去 } // 如果是qiankun加载这个应用 if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;//框架会动态加载路径 } //如果这个子应用要独立运行 if (!window.__POWERED_BY_QIANKUN__) { render(); } //子组件协议 export async function bootstrap(props){ }; //装载方法 export async function mount(props){ console.log(props);//接收传递的参数 render(props) }; //卸载方法 export async function unmount(props){ instance.$destory() }; ``` ``` 3.子应用添加vue.config.js module.exports = { devServer : { port : 10000,//端口号 headers :{ 'Access-Control-Allow-Origin' : '*',//跨域，*表示任何人都可以访问 } }, configureWebpack :{ output : { library : 'vueApp',//打包的名称 libraryTarget : 'umd',//打包的格式 } } } ```