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