小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

导读

目前 Qiankun 官网给出了 React 16、Vue 2、Angular 9 的配置说明，但是笔者的需求是 Vue 3 + TS，所以自己研究实验了一下，现在分享出来，也算是做个记录。不保证是最优，但是能运行。

正文

主应用

按照官网的例子写就行，但是建议在主应用的 html 文件中，为每一个 Micro App 建一个 root DOM 元素，然后把 container: '#container' 的值替换成相应的元素。举例如下：

    <div id="app"></div>
    <div id="reactApp"></div>
    <div id="vueApp"></div>

微应用

第 1、3 步跟官网的一样。不同的主要是第 2 步。因为是 TS 应用，所以加个第 0 步，做一些准备工作。

Step 0

在 src/shims-vue.d.ts 加入如下代码，消除 TS 的报错：

interface Window {
  __POWERED_BY_QIANKUN__: boolean;
}

根目录增加 .eslintignore 文件，消除 vue.config.js 的报错，内容如下：

/vue.config.js

yarn add -D qiankun，主要用它的 TS 声明;

Step 2

Step 1、3 参考官网即可，这里不做展开。

修改 src/router/index.ts 如下部分

const router = createRouter({
  history: createWebHistory(
    (window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "") + process.env.BASE_URL
  ),
  routes,
});

修改 main.ts 文件，内容如下

PS：还有个简单粗暴的办法，就是把 main.ts 改成 main.js，这样就不需要处理 TS 了，也就不需要因此装 qiankun 了。不过记得在 vue.config.js 将 configureWebpack.entry 修改为 main.js，否则就运行不起来了。

import "./public-path.js";
import { createApp, App as IApp, ComponentPublicInstance } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { LifeCycleFn } from "qiankun";

type LifeCycle = LifeCycleFn<Record<string, unknown>>;

let app: IApp;
let instance: ComponentPublicInstance;

// LoadableApp 声明不完善，只能先用 any
function render(props: any) {
  const { container } = props;
  app = createApp(App);
  instance = app
    .use(store)
    .use(router)
    .mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export const bootstrap: LifeCycle = async () => {
  console.log("[vue] vue app bootstraped");
};

export const mount: LifeCycle = async (props) => {
  console.log("[vue] props from main framework", props);
  render(props);
};

export const unmount: LifeCycle = async () => {
  app.unmount();
  // 不确定是否需要以下代码
  instance.$el.innerHTML = "";
};

结语

笔者的终极目的是探索一个可以平滑重构项目的方案，所以实际上更需要的是 Qiankun 提供的“多实例”模式，即一个页面中同时存在多个微应用。所以这只是个开始，其他内容敬请期待。

最后，用 Qiankun 的作者 kuitos 在《微前端的核心价值》一文中的一段内容结尾：

为什么举这两个场景呢，因为我们去统计一下业界关于”微前端“发过声的公司，会发现 adopt 微前端的公司，基本上都是做 ToB 软件服务的，没有哪家 ToC 公司会有微前端的诉求（有也是内部的中后台系统），为什么会这样？很简单，因为很少有 ToC 软件活得过 3 年以上的。而对于 ToB 应用而言，3~5 年太常见了好吗！去看看阿里云最早的那些产品的控制台，去看看那些电信软件、银行软件，哪个不是 10 年+ 的寿命？企业软件的升级有多痛这个我就不多说了。所以大部分企业应用都会有一个核心的诉求，就是如何确保我的遗产代码能平滑的迁移，以及如何确保我在若干年后还能用上时下热门的技术栈？

【微前端】Qiankun Vue3 配置

导读

正文

主应用

微应用

Step 0

Step 2

结语