Vite 常用配置详解
Vite 是一个现代化的前端构建工具，相比 Webpack 具有更快的开发服务器启动和热更新速度。以下是 Vite 的常用配置项及其说明：
1. 基础配置 (vite.config.js)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import react from '@vitejs/plugin-react'export default defineConfig({// 基础公共路径base: '/',// 项目根目录（index.html所在位置）root: process.cwd(),// 插件配置plugins: [vue(), // Vue插件react() // React插件],// 模式配置mode: 'development', // 或 'production'// 环境变量配置文件envDir: './env',// 定义全局常量替换方式define: {__APP_VERSION__: JSON.stringify('1.0.0')}
})
2. 服务器配置 (server)
export default defineConfig({server: {host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址port: 3000, // 指定开发服务器端口open: true, // 自动在浏览器中打开应用cors: true, // 启用 CORSstrictPort: true, // 端口被占用则直接退出// 代理配置proxy: {'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}},// 热更新配置hmr: {overlay: false // 禁用错误覆盖层}}
})
3. 构建配置 (build)
export default defineConfig({build: {// 构建输出目录outDir: 'dist',// 静态资源目录assetsDir: 'assets',// 小于此阈值的资源将内联为 base64assetsInlineLimit: 4096,// 是否生成 sourcemap 文件sourcemap: true,// 代码拆分策略rollupOptions: {output: {manualChunks: (id) => {if (id.includes('node_modules')) {return 'vendor'}},chunkFileNames: 'js/[name]-[hash].js',assetFileNames: 'assets/[name]-[hash].[ext]'}},// 最小化混淆minify: 'terser',// Terser 配置terserOptions: {compress: {drop_console: true,drop_debugger: true}},// 是否生成 manifest 文件manifest: false,// 是否生成预加载指令reportCompressedSize: true}
})
4. 解析配置 (resolve)
import path from 'path'export default defineConfig({resolve: {// 别名配置alias: {'@': path.resolve(__dirname, './src'),'components': path.resolve(__dirname, './src/components')},// 导入时省略的扩展名extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']}
})
5. CSS 配置 (css)
export default defineConfig({css: {// CSS 预处理器配置preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`},less: {math: 'always'}},// CSS 模块配置modules: {scopeBehaviour: 'local',generateScopedName: '[name]__[local]___[hash:base64:5]'},// PostCSS 配置postcss: {plugins: [require('autoprefixer')]}}
})
6. 环境变量配置 (.env 文件)
# .env
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com
// 使用环境变量
console.log(import.meta.env.VITE_APP_TITLE)
7. 优化依赖配置 (optimizeDeps)
export default defineConfig({optimizeDeps: {// 预构建的依赖项include: ['vue','vue-router','lodash-es'],// 排除的依赖项exclude: ['vue-demi'],// 强制预构建force: true}
})
8. Worker 配置
export default defineConfig({worker: {format: 'es', // worker 输出格式plugins: [] // worker 插件}
})
9. SSR 配置
export default defineConfig({ssr: {// SSR 外部化依赖external: ['react', 'react-dom'],// SSR 不外部化依赖noExternal: ['@vueuse/core']}
})
10. 自定义插件示例
const myPlugin = () => ({name: 'my-plugin',config(config) {// 修改配置},transform(code, id) {// 转换代码}
})export default defineConfig({plugins: [myPlugin()]
})
11. 多页面应用配置
export default defineConfig({build: {rollupOptions: {input: {main: path.resolve(__dirname, 'index.html'),admin: path.resolve(__dirname, 'admin.html')}}}
})
12. 性能优化配置
export default defineConfig({build: {// 启用 brotli 压缩大小报告brotliSize: true,// 分块大小警告限制chunkSizeWarningLimit: 1000,// 启用/禁用 CSS 代码拆分cssCodeSplit: true}
})
13. 全局变量替换
export default defineConfig({esbuild: {// 全局变量替换define: {'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)},// JSX 配置jsxFactory: 'h',jsxFragment: 'Fragment'}
})
14. 自定义中间件
export default defineConfig({server: {middlewareMode: true,configureServer: (server) => {server.middlewares.use((req, res, next) => {// 自定义中间件逻辑next()})}}
})
15. 测试配置
export default defineConfig({test: {// 测试环境配置globals: true,environment: 'jsdom',setupFiles: './test/setup.js'}
})
Vite 的配置相比 Webpack 更加简洁高效，特别适合现代前端项目开发。根据项目需求，可以灵活组合上述配置项。