微前端qiankun搭建vue3项目+问题汇总

这篇文章是关于使用 qiankun 搭建微服务的全过程及遇到的问题汇总。

新建项目

微应用改造

main.ts 改造

shims-vue.d.ts 修改

主应用改造

main.ts 改造

App.vue 中挂载

在子应用中加入路由

在子应用中添加路由跳转

新建项目

分别新建主应用和微应用

vue create qiankun-micro-vue3-app 子应用

vue create qiankun-micro-vue3-base 主应用

习惯用 typescript 的执行 vue add typescript

按照官网和github上的example来修改即可。

qiankun官网：https://qiankun.umijs.org/zh/guide

官方给的 github项目地址：qiankun/examples/vue3 at master · umijs/qiankun · GitHub

微应用改造

1.安装qiankun，yarn add qiankun

2.按照官网的步骤新增public-path.js 文件，在 main.ts 中引入

/*eslint-disable no-undef */
// 上面这句代码取消了eslint检查，否则会报错


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

main.ts 改造

完整代码如下，目前还没有引入router，把router的部分去掉

import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

import "./public-path"
import router from './router';

// let router = null;
let instance: any = null; //如果不想要ts类型检查，可以使用@ts-ignore
// let history = null;

function render(props: any = {}) {
  const { container } = props;
//   history = createWebHistory(window._