import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' import { compression } from 'vite-plugin-compression2' // https://vitejs.dev/config/ export default defineConfig(({ command, mode }) => { // 根据当前工作目录中的 `mode` 加载 .env 文件 const env = loadEnv(mode, process.cwd()) return { plugins: [ vue(), // 配置gzip压缩 env.VITE_USE_COMPRESSION === 'true' && compression({ algorithm: 'gzip', threshold: 1024 * 10 // 10KB以上的文件进行压缩 }) ], resolve: { alias: { '@': path.resolve(__dirname, 'src') // 'element-plus/lib/locale/lang/zh-cn': 'element-plus/dist/locale/zh-cn.mjs' } }, server: { port: 3000, proxy: env.VITE_USE_PROXY === 'true' ? { [env.VITE_API_BASE_URL]: { target: env.VITE_PROXY_TARGET, changeOrigin: true, rewrite: (path) => path.replace(/^\/env.VITE_API_BASE_URL/, '') } } : null }, css: { preprocessorOptions: { scss: { api: 'modern-compiler', additionalData: `@use "@/styles/variables.scss" as *;` } } }, build: { // 指定输出路径 outDir: mode === 'production' ? 'dist-prod' : 'dist-test', // 生成静态资源的存放路径 assetsDir: 'assets', // 小于此阈值的导入或引用资源将内联为 base64 编码 assetsInlineLimit: 4096, // 启用/禁用 CSS 代码拆分 cssCodeSplit: true, // 构建后是否生成 source map 文件 sourcemap: mode === 'production', // 自定义底层的 Rollup 打包配置 rollupOptions: { input: { main: path.resolve(__dirname, 'index.html') }, output: { // 分类输出 chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值 manualChunks: { 'element-plus': ['element-plus'], 'vue-lib': ['vue', 'vue-router', 'pinia'] } } }, // 设置为 false 可以禁用最小化混淆 minify: mode === 'production' ? false : 'esbuild', // 启用/禁用 brotli 压缩大小报告 brotliSize: false, // chunk 大小警告的限制 chunkSizeWarningLimit: 2000 }, optimizeDeps: { include: ['vue', 'vue-router', 'pinia', 'axios', 'element-plus'] } } })