vite.config.ts 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { defineConfig, loadEnv } from 'vite';
  2. import { createBuildOptions } from './build/config/build';
  3. import { cssOptions, optimizeDeps } from './build/config/optimize';
  4. import { createPlugins } from './build/config/plugins';
  5. import { createServerOptions } from './build/config/server';
  6. import { root, alias, wrapperEnv } from './build/utils';
  7. /**
  8. * 渲染模式,与 --mode(环境:localdev/development/test/production)正交。
  9. * 由 package.json 的 dev:csr / dev:ssg / build:csr / build:ssg 等脚本通过环境变量 APP_RENDER_MODE 传入。
  10. * - 'ssg'(默认):React Router v7 framework 模式 + 静态预渲染,入口 root.tsx/entry.client.tsx,走 reactRouter() 插件。
  11. * - 'csr':传统单页应用,入口 index.html/main.tsx,走 @vitejs/plugin-react。
  12. * 两套插件互斥(reactRouter 会接管 React 处理),只能二选一,故按模式条件化。
  13. */
  14. const RENDER_MODE = process.env.APP_RENDER_MODE === 'csr' ? 'csr' : 'ssg';
  15. const isCSR = RENDER_MODE === 'csr';
  16. // 本文件只负责组装:各配置块(plugins / server / build / optimize / css)拆到 build/config/ 下,
  17. // 依赖运行期变量(env / isCSR / isProd)的以工厂函数导出,此处按模式与环境注入后拼装。
  18. // https://vitejs.dev/config/
  19. export default defineConfig(({ mode }) => {
  20. const env = wrapperEnv(loadEnv(mode, root));
  21. const isProd = mode === 'production';
  22. return {
  23. base: env.VITE_BUILD_PUBLIC_PATH,
  24. plugins: createPlugins(isCSR, isProd, env),
  25. // 把渲染模式作为编译期常量注入客户端代码,供导航封装等按模式区分处理。
  26. define: {
  27. 'import.meta.env.VITE_RENDER_MODE': JSON.stringify(RENDER_MODE),
  28. },
  29. resolve: { alias },
  30. optimizeDeps,
  31. css: cssOptions,
  32. server: createServerOptions(env),
  33. build: createBuildOptions(isCSR, isProd),
  34. };
  35. });