所有技术选择都是存在主义的：当Vite抛弃打包传统，当React颠覆DOM统治，它们本质上都在回答同一个问题——"我们该如何更诗意地栖居在数字荒野？"
从 0 死磕全栈系列文章
从0死磕全栈第1天：从写一个React的hello world开始
Vite作为新一代前端构建工具，凭借其极快的启动速度和热更新能力，已经成为React项目的首选。今天我们就来全面解析Vite的常用配置，让你的开发效率飞起来！
## 基础配置模板
// vite.config.jsimport { defineConfig } from 'vite' // 导入配置方法import react from '@vitejs/plugin-react' // React插件import path from 'path' // 路径处理模块export default defineConfig({ base: '/app/', // 部署基础路径（子目录部署时需要） plugins: [react()], // 使用的插件列表 resolve: { alias: { // 路径别名（简化导入） '@': path.resolve(__dirname, './src'), 'components': path.resolve(__dirname, './src/components') }, extensions: ['.js', '.ts', '.jsx', '.tsx'] // 自动补全扩展名 }, server: { // 开发服务器配置 port: 3000, // 端口号 open: true, // 自动打开浏览器 proxy: { // API代理配置 '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, // 修改请求源 rewrite: path => path.replace(/^\/api/, '') // 路径重写 } } }, build: { // 生产构建配置 outDir: 'dist', // 输出目录 sourcemap: true // 生成sourcemap便于调试 }})> 注释说明：
> 1. `base`：当项目部署在非根路径时使用（如GitHub Pages）
> 2. `resolve.alias`：让`import`语句更简洁
> 3. `server.proxy`：解决开发环境跨域问题
## 性能优化配置
// 生产环境特化配置build: { assetsDir: 'static', // 静态资源存放目录 minify: 'terser', // 使用terser进行代码压缩 chunkSizeWarningLimit: 1500, // 分块大小警告阈值(KB) rollupOptions: { output: { // 代码分割策略 manualChunks: { react: ['react', 'react-dom'], // 单独打包React utils: ['lodash', 'axios'] // 工具库单独打包 } } }}> 优化要点：
> - 合理拆分代码包减少首屏加载体积
> - 静态资源分类存放便于CDN部署
> - 大文件单独警告避免意外打包
## CSS处理方案
css: { modules: { localsConvention: 'camelCase' // CSS Modules使用驼峰命名 }, preprocessorOptions: { scss: { additionalData: `@import "@/styles/vars.scss";` // 全局SCSS变量 } }, postcss: { // 自动添加浏览器前缀 plugins: [require('autoprefixer')] }}> 样式处理技巧：
> 1. `additionalData`：自动注入全局样式变量，减少重复css样式编写
> 2. `postcss`：自动处理浏览器兼容前缀
> 3. `modules`：避免CSS类名冲突
## 环境变量管理
1. 创建环境文件：
.env.development # 开发环境.env.production # 生产环境2. 变量定义规则：
# 必须以VITE_开头才能被客户端访问VITE_API_URL=https://api.example.comVITE_DEBUG=true> ⚠️ 安全提示：
> 敏感变量应放在`.env.local`（已默认gitignore）
## 实用技巧
1. **按需加载配置**：
```javascript
// 根据命令参数动态配置
export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
return { /* 开发配置 */ }
} else {
return { /* 生产配置 */ }
}
})
```
2. **多页面应用**：
```javascript
build: {
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
admin: path.resolve(__dirname, 'admin.html')
}
}
}
```
3. **SSR支持**：
```javascript
ssr: {
target: 'node', // SSR运行环境
noExternal: ['react-icons'] // 需要打包的依赖
}
```
## 常见问题解决
**问题1**：路径别名@不生效
✅ 解决方案：
```javascript
import { fileURLToPath } from 'url'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
```
**问题2**：代理配置无效
✅ 正确写法：
```javascript
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
secure: false // 关闭HTTPS验证
}
}
```
掌握这些配置技巧后，你的Vite项目将获得：
⚡ 闪电般的启动速度
即时的热模块更新
最优化的打包输出
建议收藏本文作为配置参考手册，需要时可快速查阅！
