bdrp-webview/vite.config.js

import { spawnSync } from "node:child_process";
import path from "node:path";
import { fileURLToPath, URL } from "node:url";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "@vant/auto-import-resolver";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import vueDevTools from "vite-plugin-vue-devtools";

/**
 * 构建时按当前 mode 加载 .env*，注入 process.env 后执行 SEO 静态模板生成（写入 public/，随构建复制到 dist）
 */
function generateSeoTemplatesPlugin() {
    let viteConfig;
    return {
        name: "generate-seo-templates",
        configResolved(config) {
            viteConfig = config;
        },
        buildStart() {
            if (!viteConfig || viteConfig.command !== "build") return;
            const env = loadEnv(viteConfig.mode, viteConfig.root, "");
            const mergedEnv = { ...env, ...process.env };
            const script = path.join(
                viteConfig.root,
                "seo/generate-seo-templates.cjs",
            );
            const result = spawnSync(process.execPath, [script], {
                cwd: viteConfig.root,
                env: mergedEnv,
                stdio: "inherit",
            });
            if (result.status !== 0) {
                throw new Error(
                    `SEO 模板生成失败（退出码 ${result.status ?? "unknown"}）`,
                );
            }
        },
    };
}

// https://vite.dev/config/
export default defineConfig({
    server: {
        host: "0.0.0.0", // 设置为 0.0.0.0 允许局域网访问
        port: 5678, // 自定义端口号，可选
        strictPort: true, // 如果端口被占用则抛出错误而不是使用下一个可用端口
        proxy: {
            "/api/v1": {
                target: "http://127.0.0.1:8888", // 本地接口地址
                // target: "https://chimei.ronsafe.cn/", // 本地接口地址
                changeOrigin: true,
            },
        },
    },
    build: {
        // 构建优化
        target: "es2015", // 支持更多浏览器
        minify: "terser", // 使用terser进行压缩
        terserOptions: {
            compress: {
                drop_console: true, // 移除console.log
                drop_debugger: true, // 移除debugger
            },
        },
        rollupOptions: {
            output: {
                // 代码分割策略
                manualChunks: {
                    vendor: ["vue", "vue-router", "pinia"],
                    vant: ["vant"],
                    utils: ["axios", "lodash", "crypto-js"],
                    charts: ["echarts", "vue-echarts"],
                },
                // 文件名策略
                chunkFileNames: "assets/js/[name]-[hash].js",
                entryFileNames: "assets/js/[name]-[hash].js",
                assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
            },
        },
        // 启用CSS代码分割
        cssCodeSplit: true,
        // 设置资源内联阈值
        assetsInlineLimit: 4096,
    },
    plugins: [
        generateSeoTemplatesPlugin(),
        vue(),
        AutoImport({
            imports: [
                "vue", // 自动引入 Vue Composition API，如 ref、computed、onMounted 等
                "vue-router", // 自动引入 vue-router 中的方法，如 useRoute、useRouter 等（可选）
                "@vueuse/core", // 自动引入 VueUse 中的工具函数（可选）
            ],
            dts: "src/auto-imports.d.ts", // 生成类型定义文件（可选）
            dirs: ["src/composables", "src/stores", "src/components"],
            resolvers: [VantResolver()],
        }),
        Components({
            resolvers: [VantResolver()],
        }),
        vueJsx(),
        // vueDevTools(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
    // 优化依赖预构建
    optimizeDeps: {
        include: ["vue", "vue-router", "pinia", "vant", "axios"],
    },
});