qian‘kun微服务配置vue3.2+ts+vite子应用教程

目录

效果图：

前言：

2.步骤

第一步，先确定index.html的id和main.js中的id是否和主应用的id一致

第二步，子应用下载插件

第三步，配置入口文件 main.js

第四步，配置 vite.config.js

解决子应用请求接口404问题

---

效果图：

主应用（基座）技术栈：vue2+elementUI

子应用一可视化项目技术栈：react hooks+ts+ echarts+ datav 

子应用二后台项目技术栈：vue3.2+ts+vite +element-plus

前言：

写这篇文章是因为截至今日，乾坤微前端对于vue3和vite的支持还不够，加上网上乱七八糟的文章太多，误人子弟。

还有一点，vue3.2+ts+vite应该是截至今日前端最新的技术栈了。

这篇文章，只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章：

为什么要用微前端？如何使用乾坤微前端？https://blog.csdn.net/wanghaoyingand/article/details/125878115?spm=1001.2014.3001.5501

---

2.步骤

---

第一步，先确定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"