qiankun微前端简单使用

qiankun微前端简单使用

父应用和子应用都是vue项目，如有别的框架项目，可参考文末的文章

算是小白，刚接触qiankun，冒险把它拿到项目上面用，下面是一些基本配置，尽量写得清楚一些，拿码说话

父应用：

1. 引入qiankun组件

   1. 注册子应用的基本配置
   2. 开启qiankun服务

   import { registerMicroApps, start } from 'qiankun';
   import { Loading } from 'element-ui';
   
   let loading = null;
   const loader = () => {
     // console.log(loading);
   }
   registerMicroApps([
     {
       name: 'landscapeLight',
       entry: 'http://localhost:20000/',
       container: '#subContainer',
       activeRule: '/landscapeLight',
       loader
     },
     {
       name: 'PCU', // 子应用打包后的名称（需要与子应用里面的配置一致）
       entry: 'http://localhost:30000/', // 子应用开启的服务地址
       container: '#subContainer', // 子应用在父应用中的容器ID
       activeRule: '/PCU', // 在父应用打开子应用时的路由（重点，路由配置在下面）
       loader
     },
   ], {
     // 乾坤提供的子应用生命周期钩子
     beforeLoad: () => {
       console.log('子应用加载前');
       loading = Loading.service({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       });
     },
     beforeMount: () => {
       console.log('子应用挂载前');
     },
     afterMount: () => {
       console.log('子应用挂载后');
       loading.close();
     },
     beforeUnmount: () => {
       console.log('子应用卸载前');
     },
     afterUnmount: () => {
       console.log('子应用卸载后');
     }
   });
   
   // 调用这个方法，启用乾坤
   start({
     sandbox: {
       // 父、子应用样式隔离
       experimentalStyleIsolation: true
     }
   });
   

2. 配置路由

   1. 以下是个人在项目上的配置

   // 如上面的子应用PCU为例子
   // 路由配置文件中：
   // 入口容器
   import MainView from '../components/layout/MainView.vue';
   {
       path: '/PCU',  // 路由路径和上面一致
       name: 'PCU',
       component: MainView,
   },
   ...
   // MainView.vue文件中
   ...
   <router-view v-if="showContainer" />
   <!-- 子应用通过qiankun渲染时的容器     重点：这里的容器ID需和上面配置文件中的一致 -->
   <div id="subContainer" v-else></div>
   ...
   

子应用：

1. 配置子应用的单独运行和配合qiankun运行

   1. 主要在于对window.__POWERED_BY_QIANKUN__的判断

   let instance = null;
   function render (props) {
     instance = new Vue({
       router,
       store,
       render: h => h(App)
     }).$mount('#app')
   }
   
   // 没有运行乾坤框架，单独运行项目
   if (!window.__POWERED_BY_QIANKUN__) {
     render();
   }
   if (window.__POWERED_BY_QIANKUN__) {
     window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
   }
   
   // 根据 qiankun 的协议需要导出 bootstrap/mount/unmount
   export async function bootstrap () {
   };
   export async function mount(props) {
     render(props);
   };
   export async function unmount () {
     instance.$destroy();
   };
   

2. 重点：子应用vue.config.js中需要的配置如下

   1. 配置publicPath
   2. 配置configureWebpack
   3. 配置端口
   4. 配置允许跨域headers

   module.exports = {
     // ：：：重点：：：  
     publicPath: 'http://localhost:20000', // 配置静态资源访问路径，和父应用中配置的须一致
   
     configureWebpack: { // 需要获取我打包的内容
       output: {
         libraryTarget: 'umd',  // 打包格式
         // 打包成umd格式会挂载到window上，名为landscapeLight，与父应用中配置的`registerMicroApps([{ name: 'landscapeLight', }])`名称一致
         library: 'landscapeLight'
       }
     },
     devServer: {
       port: 20000, // 父应用配置的entry中端口是多少，这里需一致
       // ：：：重点：：：
       headers: {
         'Access-Control-Allow-Origin': '*'  // 因为乾坤会用fetch请求的方式在3000端口的base应用中访问8080的m-vue，所以存在跨域，这里操作允许跨域
       },
     }
   }
   

3. 注意：

   如果子应用的index.html文件中，有引入的script，例如:

   <script type="text/javascript" src="http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak="></script>
   

   可能会导致进入子应用时报错，解决办法如下：

   ​ 在qiankun的start()方法里面添加这个属性：

   excludeAssetFilter: url => url.indexOf('api.map.baidu.com') !== -1
   

   参考：https://github.com/umijs/qiankun/issues/812

写在最后

---

文章参考：https://juejin.cn/post/7095266141970366500