vue3 + vite 作为子应用出现的问题解决办法

子应用配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import glsl from 'vite-plugin-glsl'
import path from 'path'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
  base: '/',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [
    qiankun('microAppEffect', { useDevMode: true }),//microAppEffect名称无所谓随便起
    glsl(),
    vue(),
  ],
  server:{
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  },
  build: {
    outDir: 'effect',
    assetsDir: 'effectAssets',//默认assets 这个名字与主应用不要相同
    assetsInlineLimit: 4096, // 图片转 base64 编码的阈值
  },
})

子应用路由配置

import { createRouter, createWebHistory } from "vue-router";
import {qiankunWindow} from 'vite-plugin-qiankun/dist/helper'
const history = createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/microApp/effect' : '/')
export const router = createRouter({
    history,
    routes:[
        {
            path: '/',
            name: 'Three',
            component: () => import('@/pages/index.vue'),
        },
    ]
})

主应用

{
        name: 'microAppEffect',
        entry: '//192.168.8.149:5174',
        container: '#EcmsMicroApp',
        activeRule: '/microApp/effect',
    },

这样其实已经可以了主应用通过http://192.168.8.149:5173/microApp/effect就可以访问到子应用了(前提是主应用路由已经配置好) 但是子应用里面的静态资源会出现404 解决方案：

子应用在代码里面引入静态图片的时候用new URL('/static/images/hello.png', import.meta.url).href

通过nginx代理

# 主应用History
server {
    listen       9098;
    server_name  localhost;
    location / {
        root   /Volumes/D/pisx/D2024901-PX-Pi-ECMS-Frontend/ecms;
        index  index.html index.html;
        try_files $uri $uri/ /index.html;
    }
            # 主应用加载子应用资源的时候 找不到应该去子应用去找 effectAssets就是子应用打包配置的指定生成静态资源的存放路径
            location /effectAssets {
               # 如果是子应用与主应用部署在同一台服务器就有127.0.0.1
                proxy_pass http://127.0.0.1:8098/effectAssets;
                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;
            }
            location /static {
                proxy_pass http://127.0.0.1:8098/static;
                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;
            }
}

子应用History(

server {
    listen       8098;
    server_name  localhost;
    location / {
        root   /Volumes/D/pisx/D2024901-PX-Pi-ECMS-Scene-Effects-Frontend/effect;
        index  index.html index.html;
        try_files $uri $uri/ /index.html;
        add_header Access-Control-Allow-Origin *;
    }
}

这样子应用可以单独访问也可以在主应用里面访问

umijs / qiankun

vue3 + vite 作为子应用出现的问题解决办法 #2966

子应用配置