pqs-9100_client/frontend/vite.config.ts

import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 处理env环境参数读取
import { wrapperEnv } from './build/getEnv'
import { createProxy } from './build/proxy'
// 导入
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const root = process.cwd()
    const env = loadEnv(mode, root)
    const viteEnv = wrapperEnv(env)
    return {
        plugins: [
            vue(),
            vueJsx(),
            // svg图标配置，可以使用svg图标
            createSvgIconsPlugin({
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
                symbolId: 'icon-[dir]-[name]'
            }),
            AutoImport({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', '@vueuse/core', 'pinia', 'vue-router', 'vue-i18n'],
                resolvers: [
                    // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                    ElementPlusResolver({
                        importStyle: 'sass'
                    })
                ],
                eslintrc: {
                    // 是否自动生成 eslint 规则，建议生成之后设置 false
                    enabled: false,
                    // 指定自动导入函数 eslint 规则的文件
                    filepath: './.eslintrc-auto-import.json',
                    globalsPropValue: true
                },
                // 是否在 vue 模板中自动导入
                vueTemplate: true,
                // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
                dts: false
                // dts: "src/types/auto-imports.d.ts",
            }),
            Components({
                resolvers: [
                    // 自动导入 Element Plus 组件
                    ElementPlusResolver({
                        importStyle: 'sass'
                    })
                ],
                // 指定自定义组件位置(默认:src/components)
                dirs: ['src/components', 'src/**/components'],
                // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
                dts: false
                // dts: "src/types/components.d.ts",
            }),
            nodePolyfills({
                include: ['crypto'],
                globals: {
                    crypto: true
                }
            })
        ],
        // 基础配置
        base: viteEnv.VITE_PUBLIC_PATH,
        root,
        publicDir: 'public',
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
                'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
            }
        },
        css: {
            preprocessorOptions: {
                scss: {
                    prependData: `@import "@/styles/var.scss";`,
                    api: 'modern-compiler'
                }
            }
        },
        build: {
            outDir: 'dist',
            assetsDir: 'assets',
            assetsInlineLimit: 4096,
            cssCodeSplit: true,
            sourcemap: false,
            minify: 'terser',
            terserOptions: {
                compress: {
                    // 生产环境去除console及debug
                    drop_console: false,
                    drop_debugger: true
                }
            }
        },
        server: {
            host: '0.0.0.0',
            port: viteEnv.VITE_PORT,
            open: viteEnv.VITE_OPEN,
            cors: true,
            proxy: createProxy(viteEnv.VITE_PROXY)
        }
    }
})