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

[lovewmf]

子应用配置

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
解决方案：

1. 子应用在代码里面引入静态图片的时候用 new URL('/static/images/hello.png', import.meta.url).href
2. 通过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 *;
        }
}

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