invest-research-frontend/web-app/vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

const SUB_APP_NAME = 'web-app'

// qiankun 子应用：借助 vite-plugin-qiankun 暴露微前端生命周期
export default defineConfig(({ mode }) => {
  const isProd = mode === 'production'

  return {
    // 生产环境部署在 /web/ 子路径下；开发环境用根路径便于独立调试
    base: isProd ? '/web/' : '/',
    plugins: [
      vue(),
      qiankun(SUB_APP_NAME, { useDevMode: !isProd }),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    server: {
      host: '0.0.0.0',
      port: 7100,
      strictPort: true,
      cors: true,
      origin: 'http://localhost:7100',
      headers: {
        // qiankun 通过 fetch 拉取子应用资源，须允许跨域
        'Access-Control-Allow-Origin': '*',
      },
      proxy: {
        // 开发环境将 /api 代理到后端，避免浏览器跨域
        '/api': {
          target: process.env.VITE_API_TARGET || 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },
    build: {
      target: 'es2015',
      // 每个子应用产出去独立的 chunk，便于 qiankun 沙箱加载
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/[name]-[hash].js',
        },
      },
    },
  }
})