微前端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.__POWERED_BY_QIANKUN__ ? '/vue3' : '/');
//   router = createRouter({
//     history,
//     routes,
//   });instance = createApp(App);instance.use(router);
//   instance.use(store);instance.mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped');
}export async function mount(props:any) {// storeTest(props);render(props);instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;instance.config.globalProperties.$setGlobalState = props.setGlobalState;}export async function unmount() {instance.unmount();instance._container.innerHTML = '';instance = null;// router = null;// history.destroy();}

上面的代码使用@ts-ignore 来忽略ts的类型校验，否则会一直报错，一直提示找不到这个变量__POWERED_BY_QIANKUN__

shims-vue.d.ts 修改

根本的解决办法：

找到 main.ts 的同级目录下的shims-vue.d.ts 文件，声明全局变量，并且添加__POWERED_BY_QIANKUN__属性，这样，我们就可以在项目 main.ts 中使用 window.__POWERED_BY_QIANKUN__ 来访问 __POWERED_BY_QIANKUN__ 属性了。

/* eslint-disable */
declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}/* 下面这段是新添加的代码**/
declare global {interface Window {__POWERED_BY_QIANKUN__: boolean;}
}export {}

主应用改造

main.ts 改造

在主应用中注册子引用，这一步跟着官方来就好了

import { createApp } from 'vue'
import App from './App.vue'
import { registerMicroApps,start } from 'qiankun'
registerMicroApps([{name: 'qiankun-micro-vue3-app', // 这里使用的是子应用里面 package.json 里面的nameentry: '//localhost:8082', // 这里的端口也改成子应用里面 vue.config.js 里面修改后的端口号container: '#vue3-app-container', // 子应用挂载的元素idactiveRule: '/vue3-app',props: {nickname:"最爱橘子呀",age: 18}}
]);
start()
createApp(App).mount('#app')

App.vue 中挂载

id="vue3-app-container" 与 main.ts 中的 container 对应。

<template><a href="/vue3-app">go to vue3-app</a><div id="vue3-app-container"></div><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

启动主项目，发现无法正确引入子项目，报错如下：

这是因为在子应用中我们少做了一步，修改wenpack配置，（目前vite支持不是很好，搭建微服务建议使用webpack）

在子应用中修改 vue.config.js 文件，看这个示例：https://github.com/umijs/qiankun/tree/master/src

完整代码：

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {port: 8082,headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal},},})

现在，主应用中点击go to vue3-app 就会显示子应用的界面

在子应用中加入路由

执行 yarn add vue-router -S ，添加router/index.ts

在 pages 里添加页面组件 Dog 和 Cat，在 router 中引入

import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'const routes: RouteRecordRaw[] = [{path: '/cat',name: 'Cat',component: () => import('../pages/Cat.vue')
},{path: '/dog',name: 'Dog',component: () => import('../pages/Dog.vue')
}]
const router = createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__?"/vue3-app":'/'),  // 微应用要嵌入到主应用中，/vue3-app取得是主应用注册微应用时activeRuleroutes
})export default router;

在子应用中添加路由跳转

App.vue

<template><div>子应用</div><router-link to="/cat">cat</router-link>|<router-link to="/dog">dog</router-link><router-view></router-view>
</template>

最后在主应用中测试，微应用是否能在主应用中自由跳转

页面跳转没问题，一个简单的微服务就搭建好了。