这篇文章是关于前端项目中集成 Vite 的详细配置介绍，包括配置文件、相关命令、环境模式、兼容设置、项目适配处理（样式、TypeScript、静态资源、JSON 文件、Vue 和 React 等）、常见基本配置及参考资料。涵盖了 Vite 配置的诸多方面，如命令使用、模块处理、环境变量等。
关联问题:Vite如何优化性能Vite配置注意事项Vite能否跨框架使用Vite配置文件
默认指定：
vite.config.js。自定义指定：
vite --config 自定义名称.js。
Vite相关命令
查看Vite有哪些命令：
npx vite -help。
js代码解读复制代码--host [host]// 指定域名 --port <port>// 指定端口 --https // 使用 TLS+HTTP/2 --cors // 可以跨域 --open [path] // 启动自动打开服务器 --stictPort // 如果指定端口被使用退出程序 --force // 强制Vite重新执行预构建，忽视缓存 --config | -c <file> // 指定vite的配置文件 --base path // 指定url读取文件基本路径 --clearScreen // 日志记录时，是否清屏 --logLevel | -l <level> // 指定日志等级：error|info|silent|warn --debug | -d <feat> // 获取调试日志 --filter | -f <filter> // 过滤调试日志 --mode | -m <mode> // 设置env模式 --help | -h // 获取vite帮助信息 --version | -v // 获取vite版本信息
什么时候需要使用--force？
Vite缓存分为两部分：
文件系统缓存：Vite会将预构建的依赖缓存到node_modules/.vite，package.json的dependencies字段和依赖lock文件，或者vite.config中相关字段配置过的，这些文件发生变化，vite就会重新构建，强制执行可以通过
--force或手动删除.vite目录。浏览器缓存：解析后的依赖请求会以http头max-age=
max-age=31536000,immutable强缓存，提高开发页面重载性能。
vite命令有哪些：
js代码解读复制代码vite [root] // 启动以配置文件root为入口的项目开发环境 vite serve // 启动以配置文件root为入口的项目开发环境 vite build [root] // 打包以配置文件root为入口的文件为生产环境文件 vite optimize [root] // 预构建生产环境 vite preview [root] // 构建一个本地预览静态生产环境
Preview是没有热更新的，当程序修改不会实时更新页面，需要重新执行命令。因为这个环境是生产环境，类似于上线项目，需要重新构建才能获取修改的功能。
pageage.json文件里配置vite命令：
--noEmit的作用是只进行检查，不进行编译输出，这个属性也可以在tsconfig.json文件中指定；--open项目启动自动打开浏览器。
json代码解读复制代码"dev": "vite --open", "serve": "vite serve", "build": "vue-tsc --noEmit&& vite build", "staging": "vue-tsc && vite build --mode development", "preview": "vue-tsc && vite preview",
配置环境模式
默认环境：当pageage.json中的script字段里的命令执行了vite serve或 vite，vite默认是开发环境（development），当执行了vite build命令，vite默认环境为生产环境（production）。注意地，当执行地是vite preview命令，vite默认环境也是生产环境，因为这个命令主要是创建一个能在本地执行的生产环境。JavaScript模块有一个暴露特定上下文元数据属性的对象（import.meta），这个对象包含了当前模块的信息，对象里有三个属性：env（环境变量）、resolve、url（当前模块加载路径），因为在main.ts打印的信息，所以这里获取的路径是src/main.ts。
在库模式下，也就是打包为一个库供其他开发人员下载引用的情况下，所有
import.meta.env.*的用法在构建时会被静态替换，也就是使用的时候必须按import.meta.env.BASE_URL的原样出现（例如import.meta.env['BASE_URL']是无效的）。但process.env.*不会被替换，库的使用者可以动态修改它。如果不希望这样做，可以在配置中配置：
js代码解读复制代码define:{ ` 'process.env.NODE_ENV': '"production"'`; }js代码解读复制代码// main.ts console.log(import.meta);
其中的env环境变量默认也有5个属性：BASE_URL（url公共路径）、DEV（是开发模式）、PROD（是否生产模式）、mode（环境模式）、SSR（是否服务器渲染）。当项目还配置有自定义环境变量时，env环境中自定义变量也会带上的。
注意：如果自定义环境变量前缀必须为VITE_因为vite配置文件中的envPrefix属性值默认为VITE_。如果想改变成自定义，在配置文件中必须配置envPrefix。
自定义环境：通过创建相应模式的文件。文件名格式如下：
js代码解读复制代码.env // 所有模式都会加载 .env.local // 所有模式都会加载，但会被git忽略 .env.[mode].local // 只有特定模式会加载，但会被git忽略 .env.[mode] // 只有指定模式会加载，注意.env.production优先级比.env高
配置指定环境模式：通过在vite.config.js文件中的基本配置中的mode属性指定，在这里指定会覆盖掉vite serve 、vite build中的默认mode模式，注意地，这个vite preview中mode不会被覆盖，还有如果在命令中指定mode，比如vite serve --mode production，这样也不会被配置文件中地mode覆盖，也就是命令行指定mode优先级最高。
兼容设置
模块导入兼容：支持原生ESM script标签、原生ESM 动态导入。
js代码解读复制代码// vite.config.js build:{ target:'es2015',// 支持es6文件 }浏览器兼容：兼容低版本浏览器，需要安装：yarn add @vitejs/plugin-legacy -D vite.config.js中的plugins配置：
js代码解读复制代码// vite.config.js import legacyPlugin form '@vitejs/plugin-legacy' plugins: [ legacyPlugin({ targets:['chrome 52'], // 需要兼容的目标浏览器列表，可以设置多个 additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件 }) ]项目适配处理
对样式的处理
预处理器的处理：由于Vite内置了对预处理器的支持，使用预处理器只需要安装对应的预处理器就可以，再也不需要安装相应预处理器加载器了，也不需要在vite配置了。比如使用less预处理器，这里只需要下载less就行。
Css Modules：在不同模块中定义相同类名，会导致样式被覆盖，这时候就要用到CSS module。以.module.css结尾的文件都会被认为是一个css modules文件。导入这样文件会返回一个相应对象。这样就不会产生样式冲突被覆盖，因为每一个module都是一个独立css文件，也就是模块化。
css代码解读复制代码/* example1.module.css */ .exampleClass{ color:green; } /* example2.module.css */ .exampleClass{ color:blue; }js代码解读复制代码// main.ts import example1 from '@/common/styles/example1.module.css' import example2 from '@/common/styles/example2.module.css' console.log(example1.exampleClass); // _exampleClass_16yyc_1 console.log(example2.exampleClass); // _exampleClass_tc6yz_1
Vite中css modules配置有5个属性：
LocalsConvention：模块化后的css类名命名规则，驼峰还是划线ScopeBehaviour：配置当前模块行为是模块化还是全局化（标签上带有hash就是开启了模块化）有点类似是否style标签是否配置了scoped，如下图中去掉scoped就是全局化了，去掉scoped标签上就没有data-v-hash值。而这里是控制的是css modules文件的模块行为。如果这个属性配置了global，这个模块文件样式全局生效，上面的打印都是为undefined。
js代码解读复制代码// main.ts import example1 from '@/common/styles/example1.module.css' import example2 from '@/common/styles/example2.module.css' console.log(example1.exampleClass); // undefined console.log(example2.exampleClass); // undefined
GenerateScopedName:如[name][local][hash:5]，模块对象生成的类名的规则，默认值是不带name。
HashPrefix：hash是根据文件名类名等生成的，这个前缀可以使生成的hash更加复杂独特。
GlobalModulePaths：想要参加到css模块化的文件路径数组。
Postcss处理：使用postcss插件对css代码进行转换。postscss是什么？一个用JavaScript工具和插件转换css代码地工具。使用postcss相关插件可以支持css使用高级语法、样式浏览器兼容（添加兼容前缀），比如在css中使用变量var，Vite里postcss配置默认支持css变量，如果需要支持添加兼容，需要安装postcss-preset-env插件，并在postcss配置引入插件，代码解析时就会自动添加兼容前缀
css代码解读复制代码:root{ --color:green; } .example{ color:var(--color,blue);/* 找不到--color这个变量就是使用后面的值*/ user-select: none; } /* 安装了postcss-preset-env ，会自动加上前缀 -webkit-user-select: none; -moz-user-select: none; user-select: none; */Vite中配置css：
js代码解读复制代码css: { modules: { localsConvention:'camelCaseOnly', scopeBehaviour:'local', generateScopedName:'[name]_[local]_[hash:5]', hashPrefix:'', globalModulePaths:[] }, postcss: { plugins:[postcssPreset()], }, preprocessorOptions: { less: { additionalData: '@import "./src/common/styles/index.less";', }, }, devSourcemap: true,// 开发过程中是否启用css sourcemap },对typescript处理
安装依赖：
js代码解读复制代码yarn add typescript -D // 安装typescript yarn add vite-plugin-checker -D // ts代码检查插件
vite配置：
js代码解读复制代码plugins: [checker({ typescript:true })],tsconfig.json配置：在
tsconfig.json中的compilerOptions下设置"isolatedModules": true。如此做，TS 会警告你不要使用隔离（isolated）转译的功能。因为esbuild只执行没有类型信息的转译，它并不支持某些特性，如const enum和隐式类型导入。
对静态资源处理
vite对静态资源的处理大大提供了引入格式的支持，通过对引入路径添加参数后缀，资源引入为url（
?url）、显示url引入、导入脚本为worker（?worker或?sharedworker）、将资源引入为字符串（?raw）。
js代码解读复制代码import Worker from './worker?worker' // 引入为一个worker import imgUrl from './assets/316149.jpg' //引入为一个资源路径 ，imgUrl的值为/src/assets/316149.jpg import assetAsURL from './assets/asset.js?url' //引入资源为url， assetAsURL的值为/src/assets/asset.js import assetAsstring from './assets/asset.js?raw' //引入资源为字符串，这里assetAsstring的值为js文件所有内容的字符串
对JSON文件导入处理
Vite中提供了对JSON文件解析的支持，当我们引入json文件的时候，Vite会帮我们转化一下JSON格式为对象格式。
js代码解读复制代码// {"a":"1"} import jsonFile from './assets/example.json' console.log(jsonFile);// {a:"1"}对Vue、React处理
如果在Vue或React项目中使用Vite我们需要引入相应插件适配对应框架：如
js代码解读复制代码// Vue3：@vitejs/plugin-vue // Vue3 JSX：@vitejs/plugin-jsx // Vue2.7：@vitejs/vite-plugin-vue2 // Vue<2.7：underfin/vite-plugin-vue2 // React：@vitejs/plugin-react
常见基本配置
DefineConfig的配置参数格式：对象、promise回调函数、配置方法。当defineConfig为配置方法时，它的参数为一个包含三个属性的对象：command（执行命令，有serve|build）、mode（环境模式）、ssrBuild（是否为服务器渲染构建）。在Vite配置中如果有些配置需要通过command或mode来控制时，这个配置方法就使用的上了。
js代码解读复制代码// __dirname需要安装@types/node // 也可以使用process.cwd() 代表程序执行目录，也就是项目根目录 const resolve = (dir: string) => path.resolve(__dirname, dir); export default defineConfig(({ command, mode }) => { return { // Vite配置 root: './',// 入口文件位置，如index.html base: './',// 启动服务公共路径 publicDir: resolve('public'),// 静态资源路径 mode: 'production', // 指定mode，会覆盖掉serve和build默认的mode cacheDir: 'node_modules/.vite',// 默认vite缓存路径 logLevel: 'warn',// 控制台输出的级别，error|info|silent|warn 默认 info 那么所有的日志都会打印出来 esbuild：{ jsxFactory: 'h', jsxFragment: 'Fragment' 以上为自定义JSX // ESbuild会被应用在 ts、jsx、tsx 文件，以下选项对要处理的文件类型进行配置 include：string | RegExp | (string | RegExp)[] exclude：string | RegExp | (string | RegExp)[] jsxInject:`import React from 'react'`// 自动为每一个被 ESbuild 转换的文件注入内容 } clearScreen: true,// 控制台是否清屏，最好不要设置，设置会屏蔽掉一些关键终端信息 envDir: '',// 加载存放.env文件的目录 envPrefix: 'VITE_',// 默认VITE_， 设置环境变量的前缀 appType: 'spa',// 应用种类 spa | mpa | custom assetsInclude: [''],// 支持的其他类型文件都可以在这里找到 plugins: [vue(),checker({typescript:true})], css:{}, resolve: { alias: { "@": resolve('src'),// 简化引用路径，用@代替 }, dedupe: [],// 强制Vite始终将列出的依赖项解析为同一副本（从项目根目录） conditions: [],// 解析pageage.json中情景导出时的其他允许条件，如exports字段中的import和require为情景 mainFields: [],// 解析包的入口点时尝试的字段列表 extensions: [],// 导入时想要省略的扩展名列表 preserveSymlinks: false,// }, }, json: { namedExports: true,// 是否支持从.json文件中进行按名导入 stringify: false,// 导入的json转换为export default JSON.parse("...") }, // 服务器相关 server:{ .... //服务器代理 proxy: { '/api': { target: 'http://127.0.0.1:2022', // changeOrigin: true,// 代理时，host默认浏览器的host，为true，host为target的值 // rewrite:path=>path.replace(/^\/adc/,'') // 重写url路径 } } ... }, build: { manifest: false,// 是否生成一个 manifest.json 的文件在assets目录下 target: 'modules', outDir: mode === 'staging' ? 'bundle' : 'dist', modulePreload: true,// 是否动态引入polyfill，需要引入兼容性相关的文件 assetsDir: 'assets',// 指定打包生成静态资源的存放路径 assetsInlineLimit: 4096,// 默认4kb 配置图片编译base64时大小，大于以原文件引入，小于会直接编译 chunkSizeWarningLimit: 500,// 打包文件超大小警告显示，默认500kbs emptyOutDir: true,// 构建时是否清空OutDir，再把新构建的文件放进去 watch: [''], // 监听文件变化，如果启动build不会退出程序, sourcemap:false,// 构建后是否生成 source map 文件 .... }, ssr:{},// 服务器渲染配置 preview:{},// 预览生产环境配置 worker:{},// worker线程相关配置 optimizeDeps:{},// 依赖优化配置 })