Vite是一个新型的前端构建工具，为我们在开发和构建做了很多工作，比如：生成一个开发服务器，提供热更新、直接通过包名引用模块、解决跨域等问题、打包时还会自动压缩文件体积。
Vite的内部帮我们集成了很多的插件如：Rollup、esbuild、uglifyjs、terser、postcss、less等等，降低了开发者的心智负担。
第三方插件的使用原理
在调用第三方插件，传入配置后，其实是在执行命令后添加参数,如：
...
esbuildOptions:{
platform:"node"
}
就相当于
esbuild xxx --platform=node搭建
npm create vite@latest
这条指令是 create-Vite 脚手架帮我们去创建模板, 并非是Vite, 由他创建的模板中集成了Vite;
vite.config.js
vite.config.js是默认的配置文件, 当然名字也可以更改但是没必要。
文件中需要向外暴露个配置对象
// 1. 一般
export default{
xxxx
}
// 2. 函数式（提示效果更好）
import {defineConfig} from 'vite';
export default defineConfig({
})
同时可以传入一个函数
export default defineConfig((command,mode)=>{
// command ->'build'|'serve'
// mode -> 'development'|'production' 取决于运行 vite --mode xxx xxx传入的是什么这里mode接受什么
})
esbuild
基本不用配置
网页去加载的资源在代码中写的都是相对路径，而在我们调试过程中会发现它的路径变成了http://localhost:5173/xxx这是Vite集成了esbuild去自动补全不规范的路径。
同时esbuild还可以解决多包问题，比如一个包引入了十几个包，这样浏览器就得一次性引入十几个包，而esbuild可以将十几个包写入一个包，提高引入效率。
optimizeDeps: { // esbuild，预加载
exclude: [], // 默认node_modules
esbuildOptions：{
platform:"node" // 将平台改为node，默认为browser
}
},esbuild 官方配置API
别名alias
通过设置别名可以将文件中 "@" 转为绝对路径指向 "src" 文件
extensions
默认为 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] ,所以在vue3中导入组件需要精确到 "xxx.vue" 不然报错。同时官方不建议将 '.vue' 加入，因为会影响类型支持。
import {defineConfig} from 'vite'
import path from 'path';
export default defineConfig({
...
resolve:{
alias:{ // 设置别名
'@':path.resolve(__dirname,'./src')
}
},
})css
import {defineConfig} from 'vite'
import {postcssPresetEnv} from 'postcss-preset-env'
export default defineConfig({
...
css: {
modules: {
// 转换类名（camelCase为驼峰、camelCaseOnly只为驼峰其他都被替换、
// dashes为中划线、dashesOnly为只能是中划线）
localsConvention: "dashes",
// 设置样式是否是局部的 local(默认)生成hash，global全局样式
scopeBehaviour: 'local',
// 设置样式命名方式
// generateScopedName:"[hash:5]_[name]_local"
generateScopedName: (name, filename, css) => {
return `${name}${filename}${css}`
},
// 默认类名+其他字符串（文件名、随机）加入到hash生成中
hashPrefix: 'myPro',
// 不解析该文件样式名，一般用于引入第三方
globalModulePaths: ['base.module.css']
},
// 预处理器（常用）
preprocessorOptions: {
// 整个配置会再less执行的时候当作参数提交执行lessc,所以怎么配置看less文档
less: {
//可以使用 100/2px --math="always"
math: "always",
// 定义全局的样式变量
globalVars: {},
// 可以用来导入全局变量文件（常用）
additionalData:`@import '@/styles/variables.less';`,
//开启css映像索引，生产环境定位问题文件
sourceMap:true
}
},
postcss:{
// 设置css后处理，类似js中babel，兼容低版本页面。加载默认配置
plugins:[postcssPresetEnv({ browsers: 'last 2 versions' })]
}
},
})css加载，vite匹配到相应内容，插入到style标签中。再进行解析，解析后是js形式，方便热更新等。
环境变量
一般环境有：开发、测试、预发布、灰度、生产。Vite会通过dotenv去解析相应env文件，然后loadEnv加载env进入import.env中提供使用。
默认的环境变量需要以VITE_开头，不然会被Vite自动过滤掉。
export default defineConfig({
// 设置变量头部命名为ENV_
envPrefix: 'ENV_' ,
// 加载.env文件的目录默认为根目录
envDir: '/',
})TS
Vite 天生支持 ts 不用过多配置，可以导入一个开箱即用的ts语法检测，严格要求ts语法规范。文章来源：https://www.toymoban.com/news/detail-766040.html
import checker from 'vite-plugin-checker'
export default defineConfig({
// （常用）
plugins: [checker({ typescript: true })]
})构建(常用)
export default defineConfig({
build:{
// rollup打包配置，具体看rollupAPI
rollupOptions:{
output:{
assetFileNames:'[hash]-[name][extname]'
}
},
// 4kb以下去打包成base64
assetsInlineLimit:4096,
// 指定输出路径
outDir:"dist",
//指定静态资源路径
assetsDir:"static",
//打包前清空文件，默认true
emptyOutDir:true,
},
})gzip压缩
插件 vite-plugin-compression文章来源地址https://www.toymoban.com/news/detail-766040.html
import compressPlugin from "vite-plugin-compression";
export default defineConfig({
// （常用）
plugins: [
compressPlugin({
filter:/xxx/g, // 不打包文件
threshold:1025, // 超过 1025b打包
ext:'.gz' // 以gz的后缀
})
]
})到了这里，关于Vite基本配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
