Vite的常见配置选项

Vite defineConfig Options

选项详细说明

base: 配置基础路径

通常用于指定应用在生产环境中的路径前缀。

build: 构建选项

outDir: 输出目录。
assetsDir: 存放静态资源的目录。
assetsInlineLimit: 静态资源内联限制。
cssCodeSplit: 启用/禁用 CSS 代码拆分。
sourcemap: 生成 sourcemap 文件。
rollupOptions: Rollup 相关配置。
minify: 启用/禁用压缩。可以选择 esbuild 或 terser，也可以设置为 false。
chunkSizeWarningLimit: 触发警告的 chunk 大小限制。
emptyOutDir: 构建前清空输出目录。
manifest: 生成 manifest 文件。
ssrManifest: 生成 SSR manifest 文件。
target: 构建目标。

server: 开发服务器配置

host: 服务器主机。
port: 服务器端口。
strictPort: 如果端口被占用，是否退出。
https: 启用 https。
open: 自动打开浏览器。
proxy: 配置代理。
cors: 启用 CORS。
hmr: 热模块替换配置。

preview: 预览服务器配置

类似于 server，但用于 vite preview 命令。## plugins: 配置插件。

css: CSS 相关配置

preprocessorOptions: CSS 预处理器选项。
postcss: PostCSS 配置。

resolve: 解析选项

alias: 路径别名。
extensions: 自动解析扩展名。

esbuild: ESBuild 配置

jsxFactory: JSX 工厂函数。
jsxFragment: JSX 片段。
jsxInject: 注入 JSX 工厂函数。
minify: 启用/禁用压缩。

assetsInclude: 指定静态资源文件类型

define: 定义全局常量替换

logLevel: 日志级别

envPrefix: 环境变量前缀

json: JSON 配置

namedExports: 启用命名导出。
stringify: 启用 JSON 字符串化。

worker: Worker 配置

format: Worker 格式。
plugins: Worker 插件。

这些选项覆盖了大多数 Vite 项目的常见配置需求。根据你的项目需求，可以灵活地配置这些选项。如果有更多的自定义需求，还可以参考 Vite 官方文档 了解详细的配置选项和用法。

import{ defineConfig }from'vite'exportdefaultdefineConfig({// 基础路径base:'/',// 输出目录build:{outDir:'dist',assetsDir:'assets',assetsInlineLimit:4096,cssCodeSplit:true,sourcemap:false,rollupOptions:{input:'src/main.js',output:{// 可以配置输出选项},},minify:'esbuild',// 'terser' 或者 falsechunkSizeWarningLimit:500,emptyOutDir:true,manifest:false,ssrManifest:false,target:'modules',},// 开发服务器配置server:{host:'localhost',port:3000,strictPort:false,https:false,open:true,proxy:{'/api':{target:'http://backend.api',changeOrigin:true,rewrite:path=> path.replace(/^\/api/,'')}},cors:true,hmr:true,// 热模块替换},// 预览服务器配置preview:{host:'localhost',port:5000,strictPort:false,https:false,open:true,cors:true,},// 插件plugins:[// 在这里添加插件],// CSS 相关配置css:{preprocessorOptions:{scss:{additionalData:`$injectedColor: orange;`}},postcss:{plugins:[// PostCSS 插件]},},// 解析配置resolve:{alias:{'@':'/src',},extensions:['.mjs','.js','.ts','.jsx','.tsx','.json'],},// ESBuild 配置esbuild:{jsxFactory:'h',jsxFragment:'Fragment',jsxInject:`import React from 'react'`,minify:true,},// 静态资源处理assetsInclude:['**/*.gltf'],// 定义全局常量替换define:{__APP_VERSION__:JSON.stringify('1.0.0'),},// 日志级别logLevel:'info',// 'info', 'warn', 'error', 'silent'// 环境变量前缀envPrefix:'VITE_',// JSON 配置json:{namedExports:true,stringify:false,},// Worker 配置worker:{format:'iife',plugins:[]}})