效果图：
主应用（基座）技术栈：vue2+elementUI
子应用一可视化项目技术栈：react hooks+ts+ echarts+ datav
子应用二后台项目技术栈：vue3.2+ts+vite +element-plus
前言：
写这篇文章是因为截至今日，乾坤微前端对于vue3和vite的支持还不够，加上网上乱七八糟的文章太多，误人子弟。
还有一点，vue3.2+ts+vite应该是截至今日前端最新的技术栈了。
这篇文章，只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章：
1.步骤
第一步，先确定index.html的id和main.js中的id是否和主应用的id一致
第二步，子应用下载插件
npm i @sh-winter/vite-plugin-qiankun
第三步，配置入口文件 main.js
import { createApp } from "vue"; import App from "./App.vue"; import { exportLifeCycleHooks, qiankunWindow } from "@sh-winter/vite-plugin-qiankun/dist/helper"; //+++++++++ // reset style sheet import "@/styles/reset.scss"; // element dark(内置暗黑模式) import "element-plus/theme-chalk/dark/css-vars.css"; // custom element dark(自定义暗黑模式) import "@/styles/element-dark.scss"; // custom element css import "@/styles/element.scss"; // custom directives import directives from "@/directives/index"; // vue Router import router from "@/routers/index"; // vue i18n import I18n from "@/language/index"; // pinia store import pinia from "@/store/index"; const app = createApp(App); // 注册element Icons组件 Object.keys(Icons).forEach(key => { app.component(key, Icons[key as keyof typeof Icons]); }); app.use(router).use(I18n).use(pinia).use(directives).use(ElementPlus).mount("#appVue3"); //以下++++++++++++ function render() { // const app = createApp(App); // app.mount("#appVue3"); } exportLifeCycleHooks({ bootstrap() { // do nothing. }, mount() { render(); }, unmount() {} }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render(); }
第四步，配置 vite.config.js
import qiankun, { transformAssetUrl } from '@sh-winter/vite-plugin-qiankun'//+++++ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { name as packageName } from './package.json' //+++++++ export default defineConfig({ base: `/${packageName}/`,//+++++++ plugins: [ vue({ template: { compilerOptions: { nodeTransforms: [transformAssetUrl] } } }), qiankun({ packageName })//++++++++++ ] })
至此完成。
解决子应用请求接口404问题
场景：
从主应用跳转到子应用后台项目，点击登录时，发现login登录接口报404错误、
原因及解决：
我发现，子应用的代理无用，于是加上下面一句话，意思是允许跨域访问子应用页面，然后子应用所有的请求都是完整的请求链接，比如：
url = `https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e` + "/geeker"
