vite的常用配置

Vite 是前端构建工具，常用配置主要在  vite.config.js  中，以下是核心配置项及示例：
 
1. 基础配置：resolve（模块解析）
 
- 作用：配置模块别名、文件后缀等。
- 示例：
import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    alias: {
      '@': '/src', // 给 src 目录设置别名
    },
    extensions: ['.js', '.vue', '.json'] // 自动补全的文件后缀
  }
})
 
 
2. 开发服务器配置：server
 
- 作用：设置本地服务器参数（端口、代理等）。
- 示例：
export default defineConfig({
  server: {
    port: 3000, // 启动端口
    open: true, // 自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 接口代理地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})
 
 
3. 构建配置：build
 
- 作用：设置打包参数（输出路径、文件压缩等）。
- 示例：
export default defineConfig({
  build: {
    outDir: 'dist', // 打包输出目录
    chunkSizeWarningLimit: 1000, // 单文件体积警告阈值（KB）
    minify: 'terser', // 代码压缩方式，可选 'esbuild'（更快）或 'terser'（更彻底）
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // chunk 文件名格式
        assetFileNames: 'assets/[name]-[hash].[ext]' // 静态资源命名格式
      }
    }
  }
})
 
 
4. 框架集成配置（以 Vue 为例）
 
- 作用：配置 Vue 单文件组件（.vue）解析。
- 示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue() // 引入 Vue 插件，处理 .vue 文件
  ]
})
 
 
5. 环境变量配置：defineConfig 与 .env 文件
 
- 在  vite.config.js  中定义全局变量：
export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})
 
- 通过 .env 文件读取环境变量（如  .env.development  开发环境配置）：
// .env.development
VITE_APP_API = '/dev-api'
 
 
在代码中通过  import.meta.env.VITE_APP_API  访问。
 
6. 性能优化：esbuild 配置
 
- 作用：利用 Esbuild 加速 JS/TS 编译。
- 示例：
export default defineConfig({
  esbuild: {
    jsxFactory: 'h', // Vue 3 JSX 工厂函数
    jsxFragment: 'Fragment'
  }
})
 
 
核心配置总结
 
- 开发时：重点配置  server （端口、代理）和  resolve （别名）。
- 打包时：关注  build （输出路径、压缩）和  rollupOptions （资源分块）。
- 框架集成：通过插件（如  @vitejs/plugin-vue ）支持特定框架。
 
根据项目需求，可灵活组合这些配置，提升开发和构建效率。