fara-fe-h5/vite.config.ts

import path from 'path';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';


export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())
    return {
      base: env.VITE_BASE_PATH,
      server: {
        port: 3000,
        host: '0.0.0.0',
      },
      plugins: [react()],
      build: {
          rollupOptions: {
            input: {
              main: resolve(__dirname, '/index.html'), // React SPA 入口
            }
          }
        },
      define: {
        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
      },
      resolve: {
        alias: {
          // map @ to the src directory so imports like '@/router/routes' resolve correctly
          '@': path.resolve(__dirname, 'src'),
        }
      },
      css: {
        /**
         * 如果启用了这个选项，那么 CSS 预处理器会尽可能在 worker 线程中运行；即通过多线程运行 CSS 预处理器，从而极大提高其处理速度
         * https://cn.vitejs.dev/config/shared-options#css-preprocessormaxworkers
         */
        preprocessorMaxWorkers: true,
        /**
         * 建议只用来嵌入 SCSS 的变量声明文件，嵌入后全局可用
         * 该选项可以用来为每一段样式内容添加额外的代码。但是要注意，如果你添加的是实际的样式而不仅仅是变量，那这些样式在最终的产物中会重复
         * https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions-extension-additionaldata
         */
        preprocessorOptions: {
          scss: {
            // 如果您的终端提示 legacy JS API Deprecation Warning, 您可以配置以下代码在 vite.config.ts 中
            // 使用现代 CSS API，避免 legacy warning
            api: 'modern-compiler',
            // 全局引入变量文件，使用路径别名 @ 表示 src 目录
            additionalData: `@use "@/styles/variables.scss" as *;`,
          },
        },
      },
  };
});