NoticeFront/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";

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
    // 构建产物直出 dist/（env-config 模式，与 Cms/UserBase 同风格）：CI zip 打包取 dist 根，
    // 不再有 dist/base 中间层（此前 outDir=dist/base 时 zip 打 dist 整层，zip 根只有 base/
    // 目录，projman 前端发布校验报「zip 根目录缺少 html 文件」）；dev(serve) 不写产物，
    // 两者共用该值无冲突
    const outDir = "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",
                // 仅 --mode mock 时启用 mock 中间件；dev/联调/正式均走真实后端
                localEnabled: mode === "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",
                    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",
                    },
                },
            }),
            // 主题接入已免插件化（A 类，YschTheme《管理端主题远程化与公共静态通道方案》§11）：
            // 唯一接入点 = index.html 一段同步 loader，挂载/FOUC/CSS 排序全由通道 init 承担；
            // 下面的 /static 代理只是 dev 联调便利（prod 同源用不到），删除不影响线上主题
        ],
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
            },
        },
        server: {
            host: "localhost",
            port: 8077,
            proxy: {
                // dev 正式模式：serviceHost 为空（同源相对路径 /api/...），经此代理转发到本地后端
                // （后端 CAS 过滤器对 /api/* 不回 CORS 头，浏览器直连 8070 会被拦，必须同源代理）
                "/api": {
                    target: "http://localhost:8101",
                    changeOrigin: true,
                },
                // 主题通道本地联调：dev 下 loader 走同源相对（见 index.html 注释的优先级四档），
                // manifest/CSS 经此代理到中央通道；changeOrigin 会把 Host 改写成目标域，Caddy 按 Host 匹配站点，
                // 无需再手工补 Host 头（这是旧 vite 插件里那段 headers.Host 的等价替代）。
                // 联调本地通道源：YschTheme 侧 npm run serve:static（默认 9527），再用
                // YH_THEME_PROXY_TARGET=http://localhost:9527 覆盖本 target
                "/static": {
                    target: process.env.YH_THEME_PROXY_TARGET || "http://base.yunhaixingtong.com",
                    changeOrigin: true,
                },
            },
        },
        // css预处理器
        css: {
            // preprocessorOptions: {
            //     scss: {
            //         additionalData: '@import "./src/assets/styles/utils/_varible.scss";',
            //     },
            // },
        },
        base: "./",
        build: {
            target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
            outDir, // 构建输出目录（恒 dist 根，见文件头说明）
            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",
            },
        },
    };
});