工具使用版本

• node --> 16+
• @vue/cli --> 5+

創(chuàng)建文件

創(chuàng)建文件夾qiankun-test。

使用vue腳手架創(chuàng)建主應(yīng)用main和子應(yīng)用dev

?

主應(yīng)用

安裝 qiankun:

yarn add qiankun 或者 
npm i qiankun -S

使用qiankun：

1. 在 utils 內(nèi)創(chuàng)建 微應(yīng)用文件夾 microApp,在該文件夾內(nèi)創(chuàng)建微應(yīng)用出口文件 index.js，路由文件 microAppRouter,配置函數(shù)文件 microAppSetting。

2. 路由文件 microAppRouter

   // 微應(yīng)用路由
   const microAppRouter = [{name: "dev", //用于應(yīng)用名   容器id   應(yīng)用路由基地址url: "//localhost:8080", //應(yīng)用路徑（ip與端口）props: { propsName: "8080" }, //初始化時需要傳遞給微應(yīng)用的數(shù)據(jù)// hidden: false,//是否啟用該應(yīng)用，默認(rèn)falsemenuName: "dev",//自定義屬性 根據(jù)需要自己配置（用在了菜單導(dǎo)航的名稱）},];export default microAppRouter;

3. 配置函數(shù)文件 microAppSetting

   // 引入路由
   import microAppRouter from "./microAppRouter";
   // 微應(yīng)用配置
   const microAppSetting = {};
   export default microAppSetting;
   /*** @description: 配置子應(yīng)用* @param {*}* @return {*}*/
   microAppSetting.microApps = () => {let apps = [];microAppRouter.map((item) => {if (!item.hidden) {apps.push({name: item.name, //應(yīng)用名(不可重復(fù))entry: item.url, //默認(rèn)加載應(yīng)用路徑(ip與端口)container: `#${item.name}`, //容器idactiveRule: `/${item.name}`, //激活該應(yīng)用的路徑hash模式+#（子應(yīng)用路由基地址）...item,});}}); return apps;
   };

4. 微應(yīng)用出口文件 index.js

   // 引入 qiankun  應(yīng)用注冊函數(shù)   開啟函數(shù)
   import { registerMicroApps, start } from "qiankun";
   // 引入 微應(yīng)用配置文件
   import microAppSetting from "./microAppSetting";
   //注冊子應(yīng)用
   registerMicroApps(microAppSetting.microApps());
   //開啟
   start(sandbox: {?strictStyleIsolation?: boolean, // 開啟嚴(yán)格的樣式隔離模式。這種模式下 qiankun 會為每個微應(yīng)用的容器包裹上一個?[shadow dom]節(jié)點，從而確保微應(yīng)用的樣式不會對全局造成影響。experimentalStyleIsolation?: boolean// 設(shè)置實驗性的樣式隔離特性，即在子應(yīng)用下面的樣式都會包一個特殊的選擇器規(guī)則來限定其影響范圍
   });

5. 在App.vue內(nèi)配置微應(yīng)用容器及跳轉(zhuǎn)菜單

   <template><div id="fapp"><!-- 主應(yīng)用路由出口 --><router-link to="/mian">主應(yīng)用</router-link><router-linkv-for="(item,index) in microAppDom_Router":key="index":to="`/${item.name}`?${item.props?.propsName}">{{ item.menuName }}</router-link><router-view></router-view></div>
   </template><script>
   // 引入子應(yīng)用路由
   import microAppRouter from "@/utils/microApp/microAppRouter";
   export default {name: 'App',data() {return {microAppDom_Router: microAppRouter,};}
   }
   </script>

6. 在main.js文件內(nèi)引入微應(yīng)用出口文件 index.js

import "@/utils/microApp/index";

? ? ?7. 路由文件router.js

const router = new VueRouter({mode: "history",routes
})

子應(yīng)用配置

1. 在src中增加public-path.js文件

   //public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
   }

2. 在main.js文件內(nèi)導(dǎo)出生命周期鉤子

   import Vue from 'vue'
   import App from './App.vue'
   import './public-path'
   Vue.config.productionTip = falselet instance = null;
   function render(props = {}) {const { container } = props;// Vue.use(router)instance = new Vue({render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
   }// 獨立運行時
   if (!window.__POWERED_BY_QIANKUN__) {render();
   }export async function bootstrap() {console.log('[vue] vue app bootstraped');
   }
   export async function mount(props) {console.log('[vue] props from main framework', props);render(props);
   }
   export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;
   }
   

3. 配置Webpack、跨域與端口號

   const { defineConfig } = require('@vue/cli-service')
   const { name } = require('./package');
   module.exports = defineConfig({devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微應(yīng)用打包成 umd 庫格式//jsonpFunction: `webpackJsonp_${name}` // webpack5廢棄jsonpFunctionchunkLoadingGlobal: `webpackJsonp_${name}`, },},
   });

4. 路由文件router.js

const router = new VueRouter({mode: "history",base: "/dev",routes,
});

報 ____webpack_public_path__未定義的問題
解決：
根據(jù)創(chuàng)建項目時選擇的配置，在package.json文件內(nèi)添加全局配置

module.exports = {
---globals: {__webpack_public_path__: "writable",},
---
};

報子應(yīng)用接口404問題
解決：

主應(yīng)用vue.config.js配置代理

module.exports = defineConfig({
---devServer: {proxy: {'/api1': { // 匹配所有以'/api1' 開頭的請求路徑target: 'http://localhost:8080/', // 代理目標(biāo)的基礎(chǔ)路徑changeOrigin: true,pathRewrite: {'^/api1':''}}},
},
---
})