Vite配置篇日常开发掌握这些配置就够了！

　　不知道有没有这样的兄弟，学习Vite的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手Vite有所帮助。话不多说，开干！css。preprocessorOptions
　　传递给CSS预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在scss中定义一个全局变量：vite。config。jsimport｛defineConfig｝fromvite使用defineConfig工具函数获取类型提示：exportdefaultdefineConfig（｛css：｛preprocessorOptions：｛scss：｛additionalData：injectedColor：orange；全局变量｝｝｝｝）
　　我们也可以定义一个全局变量文件，然后再引入这个文件：srcassetsstylesvariables。scssinjectedColor：orange；injectedFontSize：16px；vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛css：｛preprocessorOptions：｛scss：｛additionalData：importsrcassetsstylesvariables。scss；引入全局变量文件｝｝｝｝）
　　这样在。scss文件或。vue文件中就可以使用这些变量了。css。postcss
　　PostCSS也是用来处理CSS的，只不过它更像是一个工具箱，可以添加各种插件来处理CSS。像浏览器样式兼容问题、浏览器适配等，都可以通过PostCSS来解决。
　　Vite对PostCSS有良好的支持，我们只需要安装相应的插件就可以了。如移动端使用postcsspxtoviewport对不同设备进行布局适配：npminstallpostcsspxtoviewportDvite。config。jsimport｛defineConfig｝fromviteimportpostcssPxToViewportfrompostcsspxtoviewportexportdefaultdefineConfig（｛css：｛postcss：｛plugins：〔viewport布局适配postcssPxToViewport（｛viewportWidth：375｝）〕｝｝｝）
　　这样我们书写的px单位就会转为vw或vh，很轻松地解决了适配问题。resolve。alias
　　定义路径别名也是我们常用的一个功能，我们通常会给scr定义一个路径别名：vite。config。jsimport｛defineConfig｝fromviteimportpathfrompathexportdefaultdefineConfig（｛resolve：｛alias：｛：path。resolve（dirname，。src）路径别名｝｝｝）
　　我们也可以使用插件，来自动给src和src下所有的文件夹定义路径别名：vite。config。jsimport｛defineConfig｝fromviteimport｛ViteAliases｝from。nodemodulesvitealiases通过名称引入会报错，可能是插件问题exportdefaultdefineConfig（｛plugins：〔ViteAliases（）〕｝）
　　相应的路径别名如下：srcassetsassetscomponentscomponentsrouterrouterstoresstoresviewsviews。。。resolve。extensions
　　导入时想要省略的扩展名列表。默认值为〔。mjs，。js，。ts，。jsx，。tsx，。json〕。vite。config。jsimport｛defineConfig｝fromviteimportpathfrompathexportdefaultdefineConfig（｛resolve：｛extensions：〔。js，。ts，。json〕导入时想要省略的扩展名列表｝｝）
　　注意：不建议忽略自定义导入类型的扩展名（例如：。vue），因为它会影响IDE和类型支持。optimizeDeps。force
　　是否开启强制依赖预构建。nodemodules中的依赖模块构建过一次就会缓存在nodemodules。vitedeps文件夹下，下一次会直接使用缓存的文件。而有时候我们想要修改依赖模块的代码，做一些测试或者打个补丁，这时候就要用到强制依赖预构建。vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛optimizeDeps：｛force：true强制进行依赖预构建｝，｝）
　　除了这个方法，我们还可以通过删除。vite文件夹或运行npxviteforce来强制进行依赖预构建。server。host
　　指定服务器监听哪个IP地址。默认值为localhost，只会监听本地的127。0。0。1。当我们开发移动端项目时，需要在手机浏览器上访问当前项目。这时候可以将host设置为true或0。0。0。0，这样服务器就会监听所有地址，包括局域网和公网地址。vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛server：｛host：true监听所有地址｝｝）
　　效果如下：
　　5e157d5a4ca827d5dafbc354ff135e1。png
　　当手机和电脑处于同一个网络环境下，我们就可以通过下面那个地址进行访问了。server。proxy
　　反向代理也是我们经常会用到的一个功能，通常我们使用它来进行跨域：vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛server：｛proxy：｛字符串简写写法foo：http：localhost：4567，选项写法api：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，rewrite：（path）path。replace（api，）｝，正则表达式写法fallback。：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，rewrite：（path）path。replace（fallback，）｝，使用proxy实例api：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，configure：（proxy，options）｛proxy是httpproxy的实例｝｝，Proxyingwebsocketsorsocket。iosocket。io：｛target：ws：localhost：3000，ws：true｝｝｝｝）base
　　开发或生产环境服务的公共基础路径。可以是以下几种值：绝对URL路径，例如foo完整的URL，例如https：foo。com空字符串或。（用于嵌入形式的开发）vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛base：foo开发或生产环境服务的公共基础路径｝）build。outdir
　　指定打包文件的输出目录。默认值为dist，当dist被占用或公司有统一命名规范时，可进行调整。vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛build：｛outDir：build打包文件的输出目录｝｝）build。assetsDir
　　指定生成静态资源的存放目录。默认值为assets，可根据需要进行调整。vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛build：｛assetsDir：static静态资源的存放目录｝｝）build。assetsInlineLimit
　　图片转base64编码的阈值。为防止过多的http请求，Vite会将小于此阈值的图片转为base64格式，可根据实际需求进行调整。vite。config。jsimport｛defineConfig｝fromviteexportdefaultdefineConfig（｛build：｛assetsInlineLimit：4096图片转base64编码的阈值｝｝）plugins
　　插件相信大家都不陌生了。我们可以使用官方插件，也可以社区插件。如使用vitejspluginvue提供Vue3单文件组件的支持，使用vitepluginmock让我们更轻松地mock数据。npmimockjsSnpmivitepluginmockDvite。config。jsimport｛defineConfig｝fromviteimportvuefromvitejspluginvueimport｛viteMockServe｝fromvitepluginmockexportdefaultdefineConfig（｛plugins：〔vue（），viteMockServe（）〕｝）
　　更多社区插件，大家可以查看awesomevite。当然如果有特殊需求，我们也可以自己写一个插件。后续我也会带大家手写一个自己的插件。完整代码vite。config。jsimport｛defineConfig｝fromvite使用defineConfig工具函数获取类型提示：importvuefromvitejspluginvueimport｛viteMockServe｝fromvitepluginmockexportdefaultdefineConfig（｛base：foo，开发或生产环境服务的公共基础路径optimizeDeps：｛force：true强制进行依赖预构建｝，css：｛preprocessorOptions：｛scss：｛additionalData：importsrcassetsstylesvariables。scss；引入全局变量文件｝｝，postcss：｛plugins：〔viewport布局适配postcssPxToViewport（｛viewportWidth：375｝）〕｝｝，resolve：｛alias：｛：path。resolve（dirname，。src）路径别名｝，extensions：〔。js，。ts，。json〕导入时想要省略的扩展名列表｝，server：｛host：true，监听所有地址proxy：｛字符串简写写法foo：http：localhost：4567，选项写法api：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，rewrite：（path）path。replace（api，）｝，正则表达式写法fallback。：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，rewrite：（path）path。replace（fallback，）｝，使用proxy实例api：｛target：http：jsonplaceholder。typicode。com，changeOrigin：true，configure：（proxy，options）｛proxy是httpproxy的实例｝｝，Proxyingwebsocketsorsocket。iosocket。io：｛target：ws：localhost：3000，ws：true｝｝｝，build：｛outDir：build，打包文件的输出目录assetsDir：static，静态资源的存放目录assetsInlineLimit：4096图片转base64编码的阈值｝，plugins：〔vue（），viteMockServe（）〕｝）小结
　　其实日常开发掌握这些配置就足够了，如果遇到特殊的场景我们再去查文档就可以，而不需要一开始就把所有配置都学习一遍。Vite配置整体来说和Webpack大同小异，只不过Vite更傻瓜式，把能做的基本都帮我们做好了。我们只用修改少量配置，甚至不用修改配置，就可以满足日常开发的需求。
　　你还知道哪些常用的配置呢，欢迎在评论区留言。也欢迎关注我的合集Vue3特训营，后面我会分享更多Vue3和Vite相关的知识。
　　如果本文对你有所帮助，记得点个赞呦！
　　参考资料：Vite官方中文文档