import {resolve} from 'path' import type {ConfigEnv, UserConfig} from 'vite' import {loadEnv} from 'vite' import {createVitePlugins} from './build/vite' import {exclude, include} from "./build/vite/optimize" // 当前执行node命令时文件夹的地址(工作目录) const root = process.cwd() // 路径查找 function pathResolve(dir: string) { return resolve(root, '.', dir) } // https://vitejs.dev/config/ export default ({command, mode}: ConfigEnv): UserConfig => { let env = {} as any const isBuild = command === 'build' if (!isBuild) { env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root) } else { env = loadEnv(mode, root) } // 打包时需要移除的语句(drop_console / drop_debugger) const esbuildDrop: ('console' | 'debugger')[] = [] if (env.VITE_DROP_CONSOLE === 'true') esbuildDrop.push('console') if (env.VITE_DROP_DEBUGGER === 'true') esbuildDrop.push('debugger') return { base: env.VITE_BASE_PATH, root: root, // 服务端渲染 server: { port: env.VITE_PORT, // 端口号 host: "0.0.0.0", open: env.VITE_OPEN === 'true', // 本地跨域代理. 目前注释的原因:暂时没有用途,server 端已经支持跨域 proxy: { ['/admin-api']: { target: env.VITE_BASE_URL, ws: false, changeOrigin: true, rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''), }, }, }, // 项目使用的vite插件。 单独提取到build/vite/plugin中管理 plugins: createVitePlugins(isBuild), css: { preprocessorOptions: { scss: { additionalData: '@use "@/styles/variables.scss" as *;', javascriptEnabled: true, silenceDeprecations: ["legacy-js-api"], // 参考自 https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0 } } }, resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css'], alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js' }, { find: /\@\//, replacement: `${pathResolve('src')}/` } ] }, // 使用 esbuild 压缩,速度远快于 terser;drop 用于移除 console / debugger esbuild: { drop: esbuildDrop }, build: { minify: 'esbuild', outDir: env.VITE_OUT_DIR || 'dist', sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false, // brotliSize: false, // 提高 chunk 体积告警阈值,避免大量无意义警告 chunkSizeWarningLimit: 2000, rollupOptions: { output: { // 将体积较大的第三方依赖拆分为独立 chunk,避免全部打进入口主 chunk 导致首屏阻塞 manualChunks(id: string) { if (!id.includes('node_modules')) { return } // 注意:hiprint、form-create、wangeditor、echarts、cropperjs 等仅被懒加载页面使用的依赖 // 不在此处手动分组。手动分组会让它们被提升为入口级共享 chunk 并注入首屏 modulepreload, // 从而在首屏被抢先加载造成阻塞。交给 Rollup 自动处理,它们会跟随对应的异步路由 chunk 按需加载。 // Element Plus 组件库(首屏依赖,拆分便于并行加载与缓存) if (id.includes('element-plus') || id.includes('@element-plus')) { return 'element-plus' } // Vue 全家桶(首屏依赖) if ( id.includes('/vue/') || id.includes('/vue-router/') || id.includes('/@vue/') || id.includes('/pinia/') || id.includes('/vue-i18n/') || id.includes('/@intlify/') ) { return 'vue' } } }, }, }, optimizeDeps: {include, exclude} } }