import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import { fileURLToPath } from 'url' import vueDevTools from 'vite-plugin-vue-devtools' import viteCompression from 'vite-plugin-compression' import Components from 'unplugin-vue-components/vite' import AutoImport from 'unplugin-auto-import/vite' import ElementPlus from 'unplugin-element-plus/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import vueJsx from '@vitejs/plugin-vue-jsx' import tailwindcss from '@tailwindcss/vite' import fs from 'fs' // import { visualizer } from 'rollup-plugin-visualizer' import { collectPluginDependencies } from './src/utils/plugin-deps' export default ({ mode }: { mode: string }) => { const root = process.cwd() const env = loadEnv(mode, root) const { VITE_VERSION, VITE_PORT, VITE_BASE_URL, VITE_API_URL, VITE_API_PROXY_URL } = env console.log(`🚀 API_URL = ${VITE_API_URL}`) console.log(`🚀 VERSION = ${VITE_VERSION}`) return defineConfig({ define: { __APP_VERSION__: JSON.stringify(VITE_VERSION) }, base: VITE_BASE_URL, server: { port: Number(VITE_PORT), proxy: { '/adminapi': { target: VITE_API_PROXY_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/adminapi/, '/adminapi') }, '/upload': { target: VITE_API_PROXY_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/upload/, '/upload') } }, host: true }, // 路径别名 resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@views': resolvePath('src/views'), '@imgs': resolvePath('src/assets/images'), '@icons': resolvePath('src/assets/icons'), '@utils': resolvePath('src/utils'), '@stores': resolvePath('src/store'), '@plugins': resolvePath('src/plugins'), '@apps': resolvePath('src/apps'), '@styles': resolvePath('src/styles') } }, build: { // target: 'es2022', outDir: 'dist', chunkSizeWarningLimit: 2000, minify: 'terser', terserOptions: { compress: { // 生产环境去除 console drop_console: true, // 生产环境去除 debugger drop_debugger: true } }, dynamicImportVarsOptions: { warnOnError: true, exclude: [], include: ['src/views/**/*.vue'] }, commonjsOptions: { include: /node_modules|lib/ //这里记得把lib目录加进来,否则生产打包会报错!! }, }, plugins: [ vue(), vueJsx(), tailwindcss(), // 自动按需导入 API AutoImport({ imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'], dts: 'src/types/import/auto-imports.d.ts', resolvers: [ElementPlusResolver()], eslintrc: { enabled: true, filepath: './.auto-import.json', globalsPropValue: true } }), // 自动按需导入组件(view/components 由 component-map.ts 手动注册,用 globs 排除以避免与 form 组件重名冲突) Components({ dts: 'src/types/import/components.d.ts', resolvers: [ElementPlusResolver()], globs: ['src/components/**/*.vue', '!src/components/view/components/**'] }), // 按需定制主题配置 ElementPlus({ useSource: true }), // 压缩 viteCompression({ verbose: false, // 是否在控制台输出压缩结果 disable: false, // 是否禁用 algorithm: 'gzip', // 压缩算法 ext: '.gz', // 压缩后的文件名后缀 threshold: 10240, // 只有大小大于该值的资源会被处理 10240B = 10KB deleteOriginFile: false // 压缩后是否删除原文件 }), vueDevTools(), // 打包分析 // visualizer({ // open: true, // gzipSize: true, // brotliSize: true, // filename: 'dist/stats.html' // 分析图生成的文件名及路径 // }), { name: 'svg-transform', transform(code, id) { if (id.endsWith('.svg')) { const base64Str = fs.readFileSync(id, 'base64') return { code: `export default 'data:image/svg+xml;base64,${base64Str}'`, map: null, } } }, }, ], // 依赖预构建:避免运行时重复请求与转换,提升首次加载速度 optimizeDeps: { include: [ 'echarts/core', 'echarts/charts', 'echarts/components', 'echarts/renderers', 'xlsx', 'xgplayer', 'crypto-js', 'file-saver', 'vue-img-cutter', 'element-plus/es', 'element-plus/es/components/*/style/css', 'element-plus/es/components/message-box/style/index', 'element-plus/es/components/notification/style/index', 'element-plus/es/components/message/style/index', 'element-plus/es/components/upload/style/index', 'element-plus/es/components/button/style/index', 'element-plus/es/components/icon/style/index', 'element-plus/es/components/*/style/index', ...collectPluginDependencies() ] }, css: { preprocessorOptions: { // sass variable and mixin scss: { additionalData: ` @use "@styles/core/el-light.scss" as *; @use "@styles/core/mixin.scss" as *; ` } }, postcss: { plugins: [ { postcssPlugin: 'internal:charset-removal', AtRule: { charset: (atRule) => { if (atRule.name === 'charset') { atRule.remove() } } } } ] } } }) } function resolvePath(paths: string) { return path.resolve(__dirname, paths) }