Vite配置优化技巧总结1. 环境变量与模式动态配置环境变量优先级：Vite 通过 loadEnv 函数按优先级加载

环境变量优先级：Vite 通过 loadEnv 函数按优先级加载 .env 文件（顺序：.env.[mode].local > .env.[mode] > .env.local > .env），且 NODE_ENV 会被特殊处理为 VITE_USER_NODE_ENV，避免覆盖系统变量。
动态环境配置：利用 defineConfig 的箭头函数参数 { command, mode } 区分开发（serve）和生产（build）环境，结合策略模式合并多配置文件（如 vite.base.config + vite.dev.config）。示例：
```
export default defineConfig(({ command }) => {
  return command === 'serve' 
    ? mergeConfig(baseConfig, devConfig) 
    : mergeConfig(baseConfig, prodConfig);
});
```

自动生成别名：使用 vite-aliases 插件自动为 src 目录下的子文件夹生成别名（如 @components 对应 src/components），减少手动配置。
TypeScript 支持：在 tsconfig.json 中同步配置 paths 字段，避免 IDE 路径飘红：
```
{
  "compilerOptions": {
    "paths": { "@/*": ["src/*"] }
}
```

全局变量注入：通过 css.preprocessorOptions 在 SCSS/Less 中自动注入全局变量文件，无需手动 @import：
```
css: {
  preprocessorOptions: {
    scss: { additionalData: `@import "@/styles/vars.scss";` }
  }
}
```
移动端适配：集成 postcss-px-to-viewport 插件，将 px 自动转换为视口单位（vw/vh），适配不同屏幕。

按需加载组件库：使用 unplugin-vue-components 自动按需引入 Element Plus 或 Ant Design 组件，减少打包体积：
```
plugins: [
  Components({ resolvers: [ElementPlusResolver()] })
]
```
Gzip 压缩：通过 vite-plugin-compression 生成 .gz 文件，结合 Nginx 开启压缩，优化生产环境加载速度。
依赖预构建控制：设置 optimizeDeps.force: true 强制重新预构建依赖（或运行 vite --force），适用于调试 node_modules 代码的场景。

局域网访问：设置 server.host: true 或 0.0.0.0，使开发服务器监听所有 IP，方便移动端真机调试。
代理跨域：通过 server.proxy 配置反向代理，支持字符串、正则表达式等多种写法，灵活处理 API 请求：
```
proxy: {
  '/api': {
    target: 'http://backend:3000',
    rewrite: path => path.replace(/^\/api/, '')
  }
}
```

多入口打包：通过 build.rollupOptions.input 配置多 HTML 入口文件，结合自定义 npm scripts 启动不同入口：
```
build: {
  rollupOptions: {
    input: { main: 'src/index.html', admin: 'src/admin.html' }
  }
}
```
构建分析：集成 rollup-plugin-visualizer 生成打包体积分析图，优化代码分割策略。

ESM/CJS 配置文件兼容：Vite 通过 esbuild 将配置文件转换为 CommonJS（若未使用 .mjs），支持动态 import() 和 require。
临时文件注入：Vite 在加载配置时会注入 __dirname 等变量，确保路径解析正确，生成临时文件后自动清理。