项目搭建使用qiankun（乾坤），入门篇，以及遇到的坑与解决

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

第一步：一个系统里面分主应用和子应用

在一个项目中引入另一个项目，则是在主应用引入子应用的。

主应用：

1、在主应用中安装qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2、在主应用中的 main.js 注册微应用

import { registerMicroApps, start } from 'qiankun'; //引入qiankun的注册和启动

//注册微应用
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start();//启动

/*
*解释此作用：
注册应用完成后，路由变换则会自动触发qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中
*/

3、在主应用中，你需要引入的vue页面中添加对应的id

<div id="app">
    <!--如果路由触发qiankun的自动匹配机制匹配上的话，则会渲染在对应的id上 -->
    <div id="yourContainer"></div> 
    <div id="yourContainer2"></div>
</div>

4、在主应用中 ，vue.config.js里面允许跨域

vue.config.js//配置文件中
devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
}

 

微应用：

在被引入的项目中，不用再安装乾坤，可以直接主应用

1、在微应用中，在main.js中可以使用对应的生命周期钩子

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

2、在微应用中，在main.js中修改window资源路径，在main.js中引入一个同级的js文件，我命名为public-path.js

main.js

import './public-path.js'

 public-path.js文件内容如下

if (window.__POWERED_BY_QIANKUN__) {
  window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

3、在微应用中，在router.js中配置qiankun对应的路径

//因为在主营中监听的是路径/yourActiveRule 
//如果是qiankun引入的话一级路由就是/yourActiveRule 

new VueRouter({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/yourActiveRule ' : '/'
})

4、在微应用中，webpack的配置要修改输出

//在vue.config.js中添加
const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};

5、在微应用中，vue.config.js中允许跨域

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
}

踩坑记录：

1、如果你的报错信息是chunk不上或者静态资源404

解决办法有两种:
1、是在main.js 顶部引入一个public-path.js文件 
   import './public-path'

   //public-path.js文件内容如下:
if (window.__POWERED_BY_QIANKUN__) {
  window.__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}



2、使用 webpack 静态 publicPath 配置
在vue.config.js中配置输出静态路径
    output: {
        publicPath: `//localhost:${port}`,
      }

2、百度谷歌地图等第三方js报错 可以在index.html页面的<script>标签添加ignore

例如：<script type="text/javascript" ignore  src="报错的js路径”>