UserbaseFront/vite.config.ts

import { ConfigEnv, UserConfig, defineConfig } from "vite";
import { createHtmlPlugin } from "vite-plugin-html";
import vue from "@vitejs/plugin-vue";
import path, { resolve } from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { viteMockServe } from "vite-plugin-mock";
import ViteAutoImport from "unplugin-auto-import/vite";

import UnoCSS from "@unocss/vite";
import presetUno from "@unocss/preset-uno";

import presetRemToPx from "@unocss/preset-rem-to-px";

// 构建输出：兼容既有 CI 的 mode 子目录（build:prod → dist/prod、build:ld → dist/ld、build:base → dist/base）；
// 新命令 `vite build`（默认 production mode）→ dist/。.env.base/ld/prod 均已删除，
// 各 mode 产物内容完全相同（VITE_* 恒 undefined），不存在按环境烧值问题。
// dev 读 .env.dev（import.meta.env.VITE_*）；build 时 .env/.env.production 不存在 → VITE_* 全 undefined，
// host.config.ts 自动跳过 → 线上仅走 env-config 接口。注意：勿新建 .env.production / .env。
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
    const subDir = mode === "ld" || mode === "prod" ? mode : mode === "base" ? mode : "";
    const outDir = command === "build" && subDir ? `dist/${subDir}` : "dist";

    return {
        plugins: [
        vue(),
        createSvgIconsPlugin({
            iconDirs: [resolve(process.cwd(), "src/assets/icons")],
            symbolId: "icon-[dir]-[name]", // symbol的id
            inject: "body-last", // 插入的位置
            customDomId: "__svg__icons__dom__", // svg的id
        }),
        viteMockServe({
            mockPath: "./src/assets/mock",
        }),
        ViteAutoImport({
            imports: [
                "vue",
                "vue-router",
                {
                    "view-ui-plus": ["Button", "Table", "Modal", "Message", "Form", "FormItem", "Input", "Select"],
                },
                {
                    from: "alova/client",
                    imports: ["usePagination", "useRequest", "useWatcher", "useForm"],
                },
            ],
            dts: "./src/auto-imports.d.ts",
            dirs: ["src/api"], // 自动导入 hooks
        }),
        createHtmlPlugin({
            minify: true,
            pages: [
                {
                    entry: "src/main.ts",
                    template: "index.html",
                    filename: "index.html",
                    injectOptions: {
                        data: {
                            title: "用户中心",
                            injectScript: ``,
                        },
                    },
                },
            ],
        }),
        UnoCSS({
            presets: [
                presetUno(), // 核心预设（Tailwind风格）
                presetRemToPx({ baseFontSize: 4 }), // 1单位=1px（去rem化）
            ],
            shortcuts: {
                // 布局
                "flex-center": "flex items-center justify-center",
                // 常用组件
                btn: "px-16px py-8px rounded-4px cursor-pointer transition-all duration-200",
                "btn-primary": "bg-blue-600 text-white hover:bg-blue-700",
                card: "bg-white rounded-8px shadow-md p-16px",
                // 文本截断
                "text-ellipsis": "truncate",
                "text-multi-ellipsis": "line-clamp-2",
            },
            theme: {
                fontSize: {
                    xs: "12px",
                    sm: "14px",
                    base: "16px",
                    lg: "18px",
                    xl: "20px",
                    "2xl": "24px",
                },
            },
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    server: {
        host: "localhost",
        port: 8130,
        proxy: {
            // 主题通道本地联调（唯一必需项）：dev 下 index.html 的 loader 走同源相对（见其注释的优先级四档），
            // manifest/CSS 经此代理到中央通道；changeOrigin 顺带把 Host 改写成目标域，Caddy 按 Host 匹配站点。
            // 联调本地通道源：YschTheme 侧 npm run serve:static（默认 9527），再用
            // YH_THEME_PROXY_TARGET=http://localhost:9527 覆盖本 target。prod 同源用不到这段。
            "/static": {
                target: process.env.YH_THEME_PROXY_TARGET || "http://base.yunhaixingtong.com",
                changeOrigin: true,
            },
            // 后端接口同源代理：alova 的 baseURL 在非 mock 时取 .env 的 VITE_SERVICE_HOST，
            // 想"只换后端不改 .env"就把 VITE_SERVICE_HOST 留空 → 请求落同源 /api、/mobiapi → 由此处代理决定去向。
            //   本地后端（默认）：npm run dev
            //   线上后端：       YH_API_PROXY_TARGET=http://base.yunhaixingtong.com/userbase npm run dev
            //                   （changeOrigin 已改写 Host，Caddy 按 Host 匹配；但 CAS 登录 cookie 属
            //                    yunhaixingtong 域，localhost 侧带不上 → 未登录接口会被 302 到 SSO，
            //                    需要真数据时优先配合 VITE_IS_MOCK=false + 本地后端，或先在同浏览器登录线上）
            // mock 模式（VITE_IS_MOCK=true）下已注册的接口由 vite-plugin-mock 直接应答，未注册的仍透传到本 target。
            "/api": {
                target: process.env.YH_API_PROXY_TARGET || "http://localhost:8060",
                changeOrigin: true,
            },
            "/mobiapi": {
                target: process.env.YH_API_PROXY_TARGET || "http://localhost:8060",
                changeOrigin: true,
            },
        },
    },
    // css预处理器
    css: {
        // preprocessorOptions: {
        //     scss: {
        //         additionalData: '@import "./src/assets/styles/utils/_varible.scss";',
        //     },
        // },
    },
    base: "./",
    build: {
        target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
        outDir, // 构建输出目录：兼容 CI 的 dist/{prod|ld|base} 子目录（见文件头注释）
        assetsDir: "assets", // 静态资源得存放路径文件名  assets
        sourcemap: false, //构建后是否生成 source map 文件
        minify: "esbuild", // 项目压缩 :boolean | 'terser' | 'esbuild'
        chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
        cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
        rollupOptions: {
            input: {
                main: resolve("index.html"),
            },
            output: {
                chunkFileNames: "static/js/[name]-[hash].js",
                entryFileNames: "static/js/[name]-[hash].js",
                assetFileNames: (assetInfo: any) => {
                    if (assetInfo.type === "asset" && /\.(jpe?g|png|gif|svg)$/i.test(assetInfo.name)) {
                        return "static/img/[name].[hash][ext]";
                    }
                    if (assetInfo.type === "asset" && /\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)) {
                        return "static/fonts/[name].[hash][ext]";
                    }
                    return "static/[ext]/[name]-[hash].[ext]";
                },
            },
            manualEntrypoint: "index.html",
        },
    },
    };
});