Vite 配置篇：日常开发掌握这些配置就够了！( 二 ) _Vite

server.proxy反向代理也是我们经常会用到的一个功能，通常我们使用它来进行跨域：
// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({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 是 'http-proxy' 的实例}},// Proxying websockets or socket.io'/socket.io': {target: 'ws://localhost:3000',ws: true}}}})base开发或生产环境服务的公共基础路径。可以是以下几种值：

绝对 URL 路径，例如 /foo/
完整的 URL，例如 https://foo.com/
空字符串或 ./（用于嵌入形式的开发）

// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({base: '/foo/' // 开发或生产环境服务的公共基础路径})

build.outdir指定打包文件的输出目录。默认值为 dist ，当 dist 被占用或公司有统一命名规范时，可进行调整。

// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({build: {outDir: 'build' // 打包文件的输出目录}})

build.assetsDir【Vite 配置篇：日常开发掌握这些配置就够了！】指定生成静态资源的存放目录。默认值为 assets ，可根据需要进行调整。

// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({build: {assetsDir: 'static' // 静态资源的存放目录}})

build.assetsInlineLimit图片转 base64 编码的阈值。为防止过多的 http 请求，Vite 会将小于此阈值的图片转为 base64 格式，可根据实际需求进行调整。

// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig({build: {assetsInlineLimit: 4096 // 图片转 base64 编码的阈值}})

plugins插件相信大家都不陌生了。我们可以使用官方插件，也可以社区插件。如使用 @vitejs/plugin-vue 提供 Vue3 单文件组件的支持，使用 vite-plugin-mock 让我们更轻松地 mock 数据。
npm i mockjs -Snpm i vite-plugin-mock -D

// vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),viteMockServe()]})

更多社区插件，大家可以查看 awesome-vite。当然如果有特殊需求，我们也可以自己写一个插件。后续我也会带大家手写一个自己的插件。
完整代码

// vite.config.jsimport { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：import vue from '@vitejs/plugin-vue'import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({base: '/foo/', // 开发或生产环境服务的公共基础路径optimizeDeps: {force: true // 强制进行依赖预构建},css: {preprocessorOptions: {scss: {additionalData: `@import '/src/assets/styles/variables.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 是 'http-proxy' 的实例}},// Proxying websockets or socket.io'/socket.io': {target: 'ws://localhost:3000',ws: true}}},build: {outDir: 'build', // 打包文件的输出目录assetsDir: 'static', // 静态资源的存放目录assetsInlineLimit: 4096 // 图片转 base64 编码的阈值},plugins: [vue(),viteMockServe()]})

小结其实日常开发掌握这些配置就足够了，如果遇到特殊的场景我们再去查文档就可以，而不需要一开始就把所有配置都学习一遍。Vite 配置整体来说和 Webpack 大同小异，只不过 Vite 更傻瓜式，把能做的基本都帮我们做好了。我们只用修改少量配置，甚至不用修改配置，就可以满足日常开发的需求。