vite.config.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import { fileURLToPath, URL } from 'node:url'
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import qiankun from 'vite-plugin-qiankun'
  5. const SUB_APP_NAME = 'web-app'
  6. const useDevMode = true
  7. // qiankun 子应用:借助 vite-plugin-qiankun 暴露微前端生命周期
  8. export default defineConfig(({ mode }) => {
  9. const isProd = mode === 'production'
  10. return {
  11. // 生产环境部署在 /web/ 子路径下;开发环境用根路径便于独立调试
  12. base: isProd ? '/web/' : '/',
  13. plugins: [
  14. vue(),
  15. qiankun(SUB_APP_NAME, { useDevMode: !isProd }),
  16. ],
  17. resolve: {
  18. alias: {
  19. '@': fileURLToPath(new URL('./src', import.meta.url)),
  20. },
  21. },
  22. server: {
  23. host: '0.0.0.0',
  24. port: 7100,
  25. strictPort: true,
  26. cors: true,
  27. origin: 'http://localhost:7100',
  28. headers: {
  29. // qiankun 通过 fetch 拉取子应用资源,须允许跨域
  30. 'Access-Control-Allow-Origin': '*',
  31. },
  32. },
  33. build: {
  34. target: 'es2015',
  35. // 每个子应用产出去独立的 chunk,便于 qiankun 沙箱加载
  36. rollupOptions: {
  37. output: {
  38. chunkFileNames: 'assets/[name]-[hash].js',
  39. },
  40. },
  41. },
  42. }
  43. })