微前端框架qiankun的备忘笔记。

之前工程中整合配置都成功了，两个月过去后，做新项目竟然又忘记怎么搞了，在此把相关内容做一下记录，避免再次出现这种尴尬的情况。

官方资料

参考项目

  1. https://github.com/F-loat/vue-cli-plugin-qiankun
  2. https://segmentfault.com/a/1190000024551391

代码示例

vue3的子应用实现

配置main.js和vue.config.js两个地方就可以了。

main.js

  1. // import './public-path';
  2. import { createApp } from 'vue';
  3. import { createRouter, createWebHashHistory } from 'vue-router';
  4. import App from './App.vue';
  5. import routes from './router';
  6. import store from './store';
  8. if (window.__POWERED_BY_QIANKUN__) {
  9.   // eslint-disable-next-line no-undef
  10.   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  11. }
  13. let router = null;
  14. let instance = null;
  16. function render(props = {}) {
  17.   const { data, methods } = props;
  18.   router = createRouter({
  19.     history: createWebHashHistory(),
  20.     routes,
  21.   });
  23.   instance = createApp(App);
  24.   instance.use(router);
  25.   instance.use(store);
  27.   instance.mixin({
  28.     data() {
  29.       return {
  30.         ...data,
  31.       };
  32.     },
  33.     methods,
  34.   });
  35.   instance.mount('#biApp');
  36. }
  38. if (!window.__POWERED_BY_QIANKUN__) {
  39.   render();
  40. }
  42. export async function bootstrap() {
  43.   console.log('%c ', 'color: green;', 'vue3.0 app bootstraped');
  44. }
  46. function storeTest(props) {
  47.   props.onGlobalStateChange &&
  48.     props.onGlobalStateChange(
  49.       (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
  50.       true
  51.     );
  52.   props.setGlobalState &&
  53.     props.setGlobalState({
  54.       ignore: props.name,
  55.       user: {
  56.         name: props.name,
  57.       },
  58.     });
  59. }
  61. export async function mount(props) {
  62.   console.log('mount props：', props);
  63.   const methods = {};
  65.   if (props.data.fns) {
  66.     props.data.fns.forEach(item => {
  67.       methods[item.name] = item;
  68.     });
  70.     delete props.data.funs;
  71.   }
  74.   storeTest(props);
  75.   render({
  76.     ...props,
  77.     methods,
  78.   });
  79.   instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
  80.   instance.config.globalProperties.$setGlobalState = props.setGlobalState;
  81. }
  83. export async function unmount() {
  84.   instance.unmount();
  85.   instance._container.innerHTML = '';
  86.   instance = null;
  87.   router = null;
  88. }

注意事项：

  1. 建议根组件挂载的元素id不要使用默认的#app，有可能会出现子应用覆盖了主应用的#app。

vue.config.js

  1. devServer: {
  2.     hot: true,
  3.     disableHostCheck: true,
  4.     port,
  5.     overlay: {
  6.       warnings: false,
  7.       errors: true,
  8.     },
  9.     headers: {
  10.       'Access-Control-Allow-Origin': '*',
  11.     },
  12.     proxy: {
  13.       '/biconfigApi': {
  14.         target: 'http://localhost:7001',
  15.         changeOrigin: true,
  16.         pathRewrite: { '^/biconfigApi': '/api' },
  17.       },
  18.     },
  19.   },

注意事项：

  1. 注意写disableHostCheck和Access-Control-Allow-Origin，不然有可能会跨域加载不出来。
  2. api的前缀最好跟主应用的区分开来，不然有可能会被主应用捕捉走。

遇到的问题

  1. 在主应用的某个页面中，是否可以加载多个子应用的页面。