项目搭建使用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
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(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页面的