跳到主要内容

作为乾坤子应用开发

当你已经有一个乾坤主应用时，想要将 jeecg-vue3 前端作为子应用接入你的主应用（开发环境），可以参考本篇文档

本篇文档介绍的是开发环境的接入，发布文档请 点击此处

本功能自 2024-10-22 起支持

一、乾坤主应用的配置​

首先要配置好jeecg-vue3作为乾坤子应用时，在乾坤主应用中的entry地址，以下为参考配置：

{
  name: 'jeecg-vue3',
  // 注意将 3100 替换成你自己项目的端口号
  entry: '//localhost:3100/jeecg-vue3',
  container: '#subapp-viewport',
  activeRule: '/jeecg-vue3',
  props: {
    // 隐藏侧边栏（菜单）
    // hideSider: true,
    // 隐藏顶部
    // hideHeader: true,
    // 隐藏 多Tab 切换
    // hideMultiTabs: true,
  },
  // ...other
},

可以看到当jeecg-vue3作为乾坤子应用启动时，可以传递一些参数，当你需要时解开其注释即可

二、修改项目配置​

配置文件为.env.production

  1. 解除VITE_GLOB_QIANKUN_MICRO_APP_NAME的注释，并且改为和乾坤主应用的子应用name配置保持一致
# 填写后将作为乾坤子应用启动，主应用注册时AppName需保持一致
VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
  1. 解除VITE_GLOB_QIANKUN_MICRO_APP_ENTRY的注释，并且改为和乾坤主应用的子应用entry配置保持一致
# 作为乾坤子应用启动时必填，需与qiankun主应用注册子应用时填写的 entry 保持一致
VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//localhost:3100/jeecg-vue3
  1. 修改 VITE_PUBLIC_PATH，改为和乾坤主应用的子应用activeRule配置保持一致
# 发布路径
VITE_PUBLIC_PATH = /jeecg-vue3
  1. 配置跨域代理 需要加上和VITE_PUBLIC_PATH一致的前缀
VITE_PROXY = [["/jeecg-vue3/jeecgboot","http://localhost:8080/jeecg-boot"],["/jeecg-vue3/upload","http://localhost:3300/upload"]]

配置文件参考​

注：配置文件仅供参考，实际参数需要按照生产环境进行配置

VITE_USE_MOCK = true
VITE_PUBLIC_PATH = /jeecg-vue3
VITE_PROXY = [["/jeecg-vue3/jeecgboot","http://localhost:8080/jeecg-boot"],["/jeecg-vue3/upload","http://localhost:3300/upload"]]
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_API_URL_PREFIX=
VITE_APP_SUB_jeecg-app-1 = '//localhost:8092'
VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//localhost:3100/jeecg-vue3

三、启动项目​

至此全部都配置完毕了，只需启动项目，然后启动主项目，即可在乾坤主项目中使用 jeecg-vue3 了