微前端qiankun架构 (基于vue2实现)使用教程

工具使用版本

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

创建文件

创建文件夹qiankun-test。

使用vue脚手架创建主应用main和子应用dev

主应用

安装 qiankun:

yarn add qiankun 
 或者 
npm i qiankun -S

使用qiankun：

1. 在 utils 内创建 微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js，路由文件 microAppRouter,配置函数文件 microAppSetting。

2. 路由文件 microAppRouter

   // 微应用路由
   const microAppRouter = [
       {
         name: "dev", //用于应用名   容器id   应用路由基地址
         url: "//localhost:8080", //应用路径（ip与端口）
         props: { propsName: "8080" }, //初始化时需要传递给微应用的数据
         // hidden: false,//是否启用该应用，默认false
         menuName: "dev",//自定义属性 根据需要自己配置（用在了菜单导航的名称）
       },
     ];
     export default microAppRouter;

3. 配置函数文件 microAppSetting

   // 引入路由
   import microAppRouter from "./microAppRouter";
   // 微应用配置
   const microAppSetting = {};
   export default microAppSetting;
   /**
    * @description: 配置子应用
    * @param {*}
    * @return {*}
    */
   microAppSetting.microApps = () => {
     let apps = [];
     microAppRouter.map((item) => {
       if (!item.hidden) {
         apps.push({
           name: item.name, //应用名(不可重复)
           entry: item.url, //默认加载应用路径(ip与端口)
           container: `#${item.name}`, //容器id
           activeRule: `/${item.name}`, //激活该应用的路径hash模式+#（子应用路由基地址）
           ...item,
         });
       }
     }); 
     return apps;
   };

4. 微应用出口文件 index.js

   // 引入 qiankun  应用注册函数   开启函数
   import { registerMicroApps, start } from "qiankun";
   // 引入 微应用配置文件
   import microAppSetting from "./microAppSetting";
   //注册子应用
   registerMicroApps(microAppSetting.microApps());
   //开启
   start({
       sandbox: { 
       strictStyleIsolation?: boolean, 
       // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式不会对全局造成影响。
       experimentalStyleIsolation?: boolean
       // 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
        }
   });

5. 在App.vue内配置微应用容器及跳转菜单

   <template>
    <div id="fapp">
   
       <!-- 主应用路由出口 -->
       <router-link to="/mian">主应用</router-link>
       <router-link
       v-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>
   // 引入子应用路由
   import microAppRouter from "@/utils/microApp/microAppRouter";
   export default {
     name: 'App',
     data() {
       return {
         microAppDom_Router: microAppRouter,
       };
     }
   }
   </script>
   
   

6. 在main.js文件内引入微应用出口文件 index.js

import "@/utils/microApp/index";

     7. 路由文件router.js

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

子应用配置

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

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

2. 在main.js文件内导出生命周期钩子

   import Vue from 'vue'
   import App from './App.vue'
   import './public-path'
   Vue.config.productionTip = false
   
   let 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', // 把微应用打包成 umd 库格式
         //jsonpFunction: `webpackJsonp_${name}` // webpack5废弃jsonpFunction
         chunkLoadingGlobal: `webpackJsonp_${name}`, 
       },
     },
   });

4. 路由文件router.js

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

报 ____webpack_public_path__未定义的问题
解决：
根据创建项目时选择的配置，在package.json文件内添加全局配置

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

报子应用接口404问题
解决：

主应用vue.config.js配置代理

module.exports = defineConfig({
---
  devServer: {
    proxy: {
      '/api1': { // 匹配所有以'/api1' 开头的请求路径
          target: 'http://localhost:8080/', // 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api1':''}
      }
  },
},
---
})