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

谁践踏了优雅 2023-09-28 16:07 97阅读 0赞

**目录**

效果图：

前言：

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

![f1ebb39270b14a72b21c975ebcede121.gif][]

### 前言： ###

> 写这篇文章是因为截至今日，乾坤微前端对于vue3和vite的支持还不够，加上网上乱七八糟的文章太多，误人子弟。
> 
> 还有一点，vue3.2+ts+vite应该是截至今日前端最新的技术栈了。
> 
> 这篇文章，只讲怎么配置子应用vue3+vite+ts,对于还不清楚从0开始配置的请看昨天写的我上一篇文章：
> 
> [为什么要用微前端？如何使用乾坤微前端？![icon-default.png_t_M666][]https://blog.csdn.net/wanghaoyingand/article/details/125878115?spm=1001.2014.3001.5501][icon-default.png_t_M666_https_blog.csdn.net_wanghaoyingand_article_details_125878115_spm_1001.2014.3001.5501]

--------------------

### 2.步骤 ###

--------------------

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

![1ea5966a04044b828ad80169e4092a27.png][]

--------------------

#### 第二步，子应用下载插件 ####

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"

![a2c26560adc84912b3a6c2222498578f.png][]

[f1ebb39270b14a72b21c975ebcede121.gif]: https://img-blog.csdnimg.cn/f1ebb39270b14a72b21c975ebcede121.gif
[icon-default.png_t_M666]: https://csdnimg.cn/release/blog_editor_html/release2.1.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M666
[icon-default.png_t_M666_https_blog.csdn.net_wanghaoyingand_article_details_125878115_spm_1001.2014.3001.5501]: https://blog.csdn.net/wanghaoyingand/article/details/125878115?spm=1001.2014.3001.5501
[1ea5966a04044b828ad80169e4092a27.png]: https://img-blog.csdnimg.cn/1ea5966a04044b828ad80169e4092a27.png
[a2c26560adc84912b3a6c2222498578f.png]: https://img-blog.csdnimg.cn/a2c26560adc84912b3a6c2222498578f.png