前端 调多微服务

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
  }
});

1. 配置路由

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();
};

1. 重点：子应用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，所以存在跨域，这里操作允许跨域
    },
  }
}

1. 注意：
   如果子应用的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

写在最后

---