微前端就是將不同的功能按照不同的維度拆分成多個子應用，通過主應用來加載這些子應用，比如將多個模塊拆分出來，不同的團隊都可以獨立開發，不受技術棧的限制，每個子應用都是獨立的，最終將子應用打包成一個個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',//打包的格式 } } } ```