easydo-zcgx-web/vite.config.js

import topLevelAwait from 'vite-plugin-top-level-await';
import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import { ElementPlusResolver, VueUseComponentsResolver, VueUseDirectiveResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import { FileSystemIconLoader } from "unplugin-icons/loaders";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const viteEnv = loadEnv(mode, "./");
    return {
        base: viteEnv.VITE_BASE,
        server: {
            host: "0.0.0.0",
            port: "8080",
            open: false,
            strictPort: true,
            cors: true,
            proxy: {
                [viteEnv.VITE_BASE_URL]: {
                    target: viteEnv.VITE_BASE_SERVER_URL,
                    changeOrigin: true,
                    rewrite: path => path.replace(viteEnv.VITE_BASE_URL, "/")
                },
                // "/api": {
                //   target: "http://qdport.gateway.10.236.3.36.nip.io",
                //   changeOrigin: true,
                //   rewrite: path => path.replace("/api", "/")
                // }
            }
        },
        build: {
            target: "esnext",
            outDir: "dist",
            assetsDir: "static/assets",
            chunkSizeWarningLimit: 2000,
            rollupOptions: {
                output: {
                    chunkFileNames: "static/js/[name]-[hash].js",
                    entryFileNames: "static/js/[name]-[hash].js",
                    assetFileNames: "static/[ext]/[name]-[hash].[ext]"
                }
            }
        },
        resolve: {
            alias: {
                "~": path.resolve(__dirname, "./"),
                "@": path.resolve(__dirname, "./src")
            }
        },
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // 修改api调用方式
                    additionalData: `@use "@/assets/style/variable.scss" as *;` // 导出全局变量和 mixin
                }
            }
        },
        plugins: [
            topLevelAwait(),
            vue({
                template: {
                    compilerOptions: {
                        isCustomElement: tag => /^micro-app/.test(tag)
                    }
                }
            }),
            AutoImport({
                include: [
                    /\.[tj]sx?$/,
                    /\.vue$/,
                    /\.vue\?vue/,
                    /\.md$/
                ],
                imports: ["vue", "pinia", "vue-router", "@vueuse/core"],
                eslintrc: {
                    enabled: true,
                    filepath: "./.eslintrc-auto-import.json",
                    globalsPropValue: true
                },
                resolvers: [
                    ElementPlusResolver(),
                    IconsResolver({ componentPrefix: "tjm-icon", enabledCollections: ["ep", "home", "user"] })
                ]
            }),
            Components({
                dirs: ["src/components/", "src/view/"],
                include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
                resolvers: [
                    ElementPlusResolver(),
                    VueUseComponentsResolver(),
                    VueUseDirectiveResolver(),
                    IconsResolver({
                        prefix: "tjm-icon",
                        customCollections: ["ep", "home", "user"]
                    })
                ]
            }),
            // 静态Icon 插件配置 https://icones.js.org/ https://icones.netlify.app/  vscode插件Iconify IntelliSense
            Icons({
                compiler: "vue3",
                customCollections: {
                    home: FileSystemIconLoader("src/assets/svg/home", (svg) => svg.replace(/^<svg /, '<svg fill="currentColor" ')),
                    user: FileSystemIconLoader("src/assets/svg/user", (svg) => svg.replace(/^<svg /, '<svg fill="currentColor" '))
                },
                autoInstall: true
            }),
            createSvgIconsPlugin({
                iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
                symbolId: "icon-[dir]-[name]",
                svgoOptions: true
            })
        ]
    }
});