相信大部分兄弟都体验过Vite了，都知道它很快。在学习的时候，官网上的各种配置也是看的眼花缭乱，不知道哪些是必要掌握的。为了提高效率，我把常用的一些配置梳理一下，希望对大家有所帮助。

plugins 插件

对于插件相信大家都不会陌生。我们可以使用官方插件，也可以使用社区插件。例如@vitejs/plugin-vue提供Vue3单文件组件的支持。 我们经常会使用到的Vue3使用Element组件库按需引入所需的插件，这可以去Element官网查看配置。

base公共基础路径

开发或生产环境服务的公共基础路径。可以是以下几种值:

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

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

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

resolve.alias 路径别名

定义路径别名是我们常用的一个功能，我们通常会给 src定义别名为@:

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    resolve: {
        alias: {
            '@': resolve(__dirname, '/src')    // 路径别名
        }
    }
})

resolve.extensions 要省略的扩展名

导入时想要省略的扩展名列表。默认为['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
    }
})

注意：不建议忽略自定义导入类型的扩展名（如：.vue），因为他会影响 IDE 和类型的支持。

server.host 指定服务器监听地址

指定服务器监听的的IP地址，默认值为localhost，只监听本地的127.0.0.1.当我们需要开发移动端项目时，需要在手机浏览器上访问当前项目，这个时候就需要将host的值设置为true或0.0.0.0，这样服务器就好监听所有地址，包括局域网和公网地址。

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    server: {
        host: true    // 监听所有地址
    }
})

效果如下：

当手机和电脑处于同一网络环境下，我们就可以通过下面的那个地址进行访问了。

server.proxy 方向代理

方向代理是我们经常要用到的一个功能，通常我们是用它来进行跨域的：

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    server: {
        proxy: {
            // 字符串简写写法
            '/api': 'http://localhost:8090',
            // 选项写法
            '/api': {
                target: 'http://aystar.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            },
            // 正则表达式写法
            '^/backend/.*': {
                target: 'http://aystar.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, '')
            },
            // 使用proxy 实例
            '/api': {
                target: 'http://aystar.com',
                changeOrigin: true,
                configure: (proxy, options) => {
                    // proxy 是 'http-proxy' 的实例
                }
            },
            // websockets 或 socket.io 
            '/socket.io': {
                target: 'ws://localhost:9090',
                ws: true,
            }
        }
    }
})

css.preprocessorOptions 传递给css 预处理器的配置选项，这些配置会传递到预处理器的执行参数中去。例如，在 less 中定义一个全局变量：

// src/assets/styles/variables.less
@primarycolor: orange;
@fontSize: 16px;

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnable: true,
                modifyVars: {
                  hack: `true; @import (reference) "${resolve('src/assets/styles/variables.less')}";`,
                },
            }
        },
    }
})

这样在.less文件或.vue文件中就可以使用（路径：src/assets/styles/variables.less）这些变量了。

css.postcss 处理css

PostCSS是用来处理css的，可以通过添加各种插件来处理css。像浏览器样式兼容问题、浏览器适配问题等等，都可以通过使用PostCSS来解决。 Vite 对PostCSS 有良好的支持，我们只需要安装相应的插件即可。如移动端适配可使用 postcss-px-to-viewport对不同设备进行布局适配。

npm install postcss-px-to-viewport -D

// vite.config.ts
import { defineConfig } from 'vite'
import postcssPxToViewport from 'postcss-px-to-viewport'
import { resolve } from 'path';

export default defineConfig({
    css: {
        postcss: {
            plugins: {
                // viewport 布局适配
                postcssPxToViewport({
                    viewportWidth: 375
                })
            }
        }
    }
})

这样我们书写的 px 单位就会转为 vw 或 vh，很轻松就解决了手机不同设备的适配问题。

build.outDir 打包文件输出目录

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

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

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

build.assetsDir 静态文件存放目录

指定静态文件的存放目录。默认为 assets， 可根据需要自行调整。

// vite.config.ts
import { defineConfig } from 'vite'
import { resolve } from 'path';

export default defineConfig({
    build: {
        assetsDir: 'static'    // 静态文件的存放目录
    }
})

小结

在我们日常使用过程中，掌握这些配置就足够了，如果遇到特殊情况，我们再去查询文档就OK了，不需要将所有配置都学习掌握。希望今天的分享，能够对大家有帮助。

如果本文对你有所帮助，记得点赞支持一下哦！💕

参考资料：Vite 官方文档