跳到主要内容

作为乾坤子应用发布

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

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

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

一、乾坤主应用的配置​

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

{
  name: 'jeecg-vue3',
  // 注意将 qiankun.test.com 替换成你自己的项目地址
  entry: '//qiankun.test.com/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=//qiankun.test.com/jeecg-vue3
  1. 修改 VITE_PUBLIC_PATH，改为和乾坤主应用的子应用activeRule配置保持一致
# 发布路径
VITE_PUBLIC_PATH = /jeecg-vue3
  1. 配置后台接口地址
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://api3.test.com

重要提醒：请把http://api3.test.com换成自己的后台域名。

配置文件参考​

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

VITE_USE_MOCK = true
VITE_PUBLIC_PATH = /jeecg-vue3
VITE_BUILD_COMPRESS = 'none'
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://api3.test.com
VITE_GLOB_API_URL_PREFIX=
VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-vue3
VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//qiankun.test.com/jeecg-vue3

三、编译打包项目​

  • 进入根目录
cd jeecgboot-vue3
  • 打包编译
pnpm install 
pnpm run build
  • 打包成功

四、通过nginx部署前端​

通过 nginx 配置请求转发到后台接口

重要说明：

  • boot3.jeecg.com是官方Vue3前端演示地址，请把下面的boot3.jeecg.com 全部换成自己的前端域名。
  • /jeecgboot/对应的是上方配置文件中的参数 VITE_GLOB_API_URL，这个可以不改避坑。
server {
    listen       80;
    # 注意：替换成你的真实地址
    server_name  qiankun.test.com;
    # 前端打的dist资源存放目录
    # 注意，必须将资源存放在二级目录 jeecg-vue3（与activeRule 保持一致） 下，参考下图
    root		 /usr/share/nginx/jeecg;

    # 这里和乾坤主应用的子应用 activeRule 配置保持一致
    location /jeecg-vue3 {
        # 用于配合 browserHistory使用
        try_files $uri $uri/ /jeecg-vue3/index.html;

        # 添加允许跨域，仅允许 http://qiankun.main.com 地址跨域
       # 注意：这里要替换成你的乾坤主应用的地址
        add_header 'Access-Control-Allow-Origin' 'http://qiankun.main.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' '*';
    }

    location /jeecg-vue3/jeecgboot {
        # 后台接口地址(我们部署去掉了/jeecg-boot项目名，如果你有请加上）
        proxy_pass http://api3.test.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

nginx配置 root 参数，静态资源存放路径参考示例

至此，恭喜你，启动乾坤主应用和子应用就可以访问了

五、编译后修改后台配置​

dist\_app.config.js

特别注意：VITE_GLOB_QIANKUN_MICRO_APP_NAME 和 VITE_GLOB_QIANKUN_MICRO_APP_ENTRY 这两个参数在编译后不可以通过此方式进行修改，如果要修改这两个参数，只能重新编译并打包上传覆盖所有文件！

六、其他技巧​

  1. 前端不缓存html，防止程序更新后缓存继续生效
    location / {
         # 不缓存html，防止程序更新后缓存继续生效
          if ($request_filename ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            access_log on;
          } 
    }