在现代前端开发中，Vite作为一个快速、现代化的构建工具备受青睐。本文将深入探讨Vite的配置，从基础概念到高级用法，让你快速掌握Vite的强大功能，提升前端开发效率。
主要内容：
- 介绍Vite： 简要介绍Vite的背景和优势，为读者建立基本认识。
- 基础配置： 详细解释Vite配置文件中的基础配置项，例如项目根目录、输出目录等，并提供实际示例。
- 开发服务器配置： 深入讨论Vite开发服务器的配置选项，包括主机地址、端口号、自动打开浏览器等，并附上实用示例。
- 代码转换配置： 解释Vite中关于代码转换的配置，如JSX转换等，并提供实际用例。
- 代码压缩与优化： 探讨Vite中的代码压缩和优化配置，包括优化依赖模块、热模块替换等，并附上示例代码。
- 构建配置： 深入了解Vite构建过程的配置项，如输出目录、是否生成manifest.json文件等，并给出详细示例。
- 其他配置项： 解释Vite配置文件中的其他配置项，如路径别名、全局变量定义、插件使用等，提供实际应用示例。
废话不多说，直接上示例，
import { UserConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件
import styleImport from 'vite-plugin-style-import'; // 导入样式按需加载插件
import components from 'vite-plugin-components'; // 导入自动导入组件插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // 导入 SVG 图标插件
import md from 'vite-plugin-md'; // 导入 Markdown 插件
import AutoImport from 'unplugin-auto-import/vite'; // 导入自动导入插件
const config: UserConfig = {
// 项目根目录，默认为当前工作目录
root: process.cwd(),
// 项目输出目录，默认为 'dist'
outDir: 'dist',
// 开发服务器配置
server: {
// 指定开发服务器的主机地址，默认为 'localhost'
host: 'localhost',
// 指定开发服务器的端口号，默认为 3000
port: 3000,
// 指定是否自动在浏览器中打开项目，默认为 false
open: false,
// 指定是否启用 https，可以是 true/false 或者传入一个对象进行更详细的配置
https: false,
// 指定是否启用中间件模式，默认为 false
middlewareMode: false,
// 指定是否开启服务器端渲染，默认为 false
ssr: false,
},
// 代码转换配置
esbuild: {
// 指定是否开启 JSX 转换，默认为 true
jsxFactory: undefined,
// 指定是否开启 JSX Fragments 转换，默认为 true
jsxFragment: undefined,
// 指定是否开启 JSX 隐式返回转换，默认为 true
jsxInject: undefined,
},
// 代码压缩配置
minify: 'terser',
// 代码优化配置
optimizeDeps: {
// 指定需要进行优化处理的依赖模块列表，默认为空数组
include: ['vue'],
// 指定不需要进行优化处理的依赖模块列表，默认为空数组
exclude: [],
},
// 热模块替换配置
hmr: {
// 指定是否在浏览器中显示热更新的错误覆盖，默认为 true
overlay: true,
},
// 服务器端渲染配置
ssr: {
// 指定是否开启服务器端渲染，默认为 false
noExternal: [],
},
// 构建配置
build: {
// 指定是否将构建后的资源输出到子目录，默认为 false
emptyOutDir: true,
// 指定是否为生产环境打包，默认为 true
production: true,
// 指定是否在输出目录中生成 manifest.json 文件，默认为 true
manifest: true,
// 指定是否将构建后的资源进行压缩，默认为 true
minify: 'terser',
// 指定是否开启 CSS 代码拆分，默认为 true
cssCodeSplit: true,
// 指定是否开启 ESModule 格式代码拆分，默认为 true
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
// 其他配置项
configFile: 'vite.config.js', // 指定配置文件的名称，默认为 'vite.config.js'
alias: {
// 示例：给路径别名添加配置
// '@': '/src',
},
define: {
// 示例：定义全局变量
// __VERSION__: JSON.stringify('v1.2.3')
},
plugins: [
// 使用 Vue 插件
vue(),
// 使用样式按需加载插件
styleImport({
libs: [{
// 指定需要按需加载的样式库，这里以 Ant Design Vue 为例
libraryName: 'ant-design-vue',
// 指定样式库是否为 ES Module 格式
esModule: true,
// 根据组件名称解析样式路径
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/css`;
},
}],
}),
// 使用自动导入组件插件
components({
// 指定需要自动导入的组件库目录，这里以 Ant Design Vue 的图标组件为例
dirs: ['@ant-design/icons-vue'],
}),
// 使用 AutoImport 插件
AutoImport({
// 配置自动导入的模块列表，可以根据需要添加更多模块
imports: ['vue', '@vue/runtime-core', 'vue-router', 'vuex'],
}),
// 使用 SVG 图标插件
createSvgIconsPlugin({
// 指定 SVG 图标所在的目录
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定生成的符号 ID 的格式
symbolId: 'icon-[name]',
}),
// 使用 Markdown 插件
md(),
],
css: {
// 示例：CSS 配置
// modules: true,
// preprocessorOptions: {
// scss: {
// additionalData: '@import "./src/styles/variables";',
// },
// },
},
logLevel: 'info', // 指定日志输出级别，默认为 'info'
clearScreen: true, // 指定每次编译前是否清空控制台，默认为 true
resolve: {
// 示例：解析配置
// alias: {
// '@': path.resolve(__dirname, 'src'),
// },
},
assetsInclude: [
// 示例：静态资源匹配规则
// '*.png',
// '*.jpg',
],
};
export default config;
