easydo-zcgx-web/vite.config.js

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: true,
            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: {
            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: {
                    additionalData: '@import "@/assets/style/variable.scss";'
                }
            }
        },
        plugins: [
            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
            })
        ],

    }
}

)