const path = require('path');const { name } = require('./package');const port = 4001; // dev portfunction resolve(dir) {return path.join(__dirname, dir);}module.exports = {outputDir: 'dist',assetsDir: 'static',filenameHashing: true,devServer: {host: '0.0.0.0',hot: true,disableHostCheck: true,port,overlay: {warnings: false,errors: true,},headers: {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': '*','Access-Control-Allow-Credentials': 'true','Access-Control-Allow-Methods': '*','Cache-Control': 'no-cache'},},// 自定义webpack配置configureWebpack: {resolve: {alias: {'@': resolve('src'),},},output: {// 把子应用打包成 umd 库格式library: `${name}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${name}`,}},};•这里我们导入了package.json的name字段，因为这里需要和主应用配置的app.ts文件的name字段一致•headers 添加跨域配置，因为主应用是通过fetch方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置•output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置
编写布局还记得我们以下这个图不？
文章插图
我认为Header应该是属于主应用，而下面的Aside和Main都是属于微应用，Aside块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护 。
所以，在微应用，我们还需要处理下左侧的菜单布局 。
我们新增一个Layout.vue布局文件
// src/views/layout/Layout.vue<template><el-container><el-aside width="180px"><el-menu:router="true"@select="handleSelect":default-active="activeIndex"><el-menu-item :key="item.path" v-for="item in menus" :index="item.path">{{ item.name }}</el-menu-item></el-menu></el-aside><el-main><router-view /></el-main></el-container></template><script lang="ts" setup>// 这里的菜单应该从后端获取const menus = [{ name: "路由配置", path: "/route" },{ name: "字典配置", path: "/dict" },{ name: "参数配置", path: "/config" },];const activeIndex = "";const handleSelect = (key: string, keyPath: string[]) => {console.log(key, keyPath);};</script>结果至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：首页
文章插图
微应用
文章插图
最后好了，基于Vue3+TS+ElementPlus+Qiankun的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了 。
相关源码地址：
•主应用：Anyin Cloud Parent
•微应用：Anyin Cloud Base
References[1] Anyin Cloud :
推荐阅读
- 基于密集行为的欺诈检测算法-LockInfer
- 基于Kali的一次DDos攻击实践
- Linux内核中断之中断初始化
- 一个基于Vue3的无编译小框架 byview
- 网络协议之：基于UDP的高速数据传输协议UDT
- 纯前端生成设置头像 - 基于Vue3、Ts、Vite
- 几种常用的基于密度的聚类算法
- 一个基于spring boot的Java开源商城系统
- WebRTC 音视频同步原理与实现
- SpringBoot实战基于异常日志的邮件报警