Vite自定义配置
当启动 Vite 项目时，会自动解析项目根目录下名为 vite.config.js 的文件，基础的配置文件代码如下：
// vite.config.js
export default {
// 配置选项
}vite.config.js 的配置项有很多，使用 defineConfig 工具函数，并结合 IDE 自动提示功能，可以更加方便地查看各项配置，代码如下：
import { defineConfig } from 'vite'
export default defineConfig({
...
})提示信息如图 9-7 所示。
同时，也可以区分开发环境和生产环境进行不同的配置，代码如下：
export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
return {
// serve 独有的配置
}
} else {
return {
// build 独有的配置
}
}
})静态资源处理
Vite 内置了对 CSS 文件、图片、JSON 文件的处理，导入 .CSS 文件会把内容插入 <style> 标签中，同时也带有 HMR 支持，能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。同时，也可以配置 Sass、Less、Stylus 等预处理工具，前提是需要安装：
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus安装完成之后，可以直接在 Vue 的单文件组件中使用 <style lang="sass">（或其他预处理器）自动开启这些支持。同时，可以通过 vite.config.js 的 CSS 项对这些预处理器进行配置，代码如下：
export default defineConfig({
css: {
preprocessorOptions: {
scss: { // 对scss进行配置
additionalData: `$injectedColor: orange;`
}
}
}
})导入一个静态资源会返回解析后的 URL，代码如下：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl添加一些特殊的查询参数可以更改资源被引入的方式，代码如下：
// 显式加载资源为一个 URL
import assetAsURL from './asset.js?url'
// 以字符串形式加载资源
import assetAsString from './shader.glsl?raw'
// 加载为 Web Worker
import Worker from './worker.js?worker'
// 在构建时， Web Worker 内联为 base64 字符串
import InlineWorker from './worker.js?worker&inline'JSON 文件可以直接导入使用，同时支持导入其某个字段，代码如下：
// 导入整个对象
import json from './example.json'
// 对一个根字段使用具名导入，更有利于 Tree Shaking
import { field } from './example.json'插件配置
我们知道，在开发环境下，Vite 是直接基于浏览器的 ES 6 Modules 的，所以对于 JavaScript 文件来说，在浏览器中就可以直接引入，但是对于一些其他文件，例如 .vue、.jsx 文件等，是无法直接被浏览器识别的，所以针对这些文件，还需要使用一些 Vite 插件编辑之后，再提供给浏览器。
在 vite.config.js 中采用 plugin 项来配置插件：
import vue from '@vitejs/plugin-vue' // Vue插件
import vueJsx from '@vitejs/plugin-vue-jsx' // JSX插件
import styleImport from 'vite-plugin-style-import' // 第三方包样式按需导入
export default defineConfig({
plugins: [
vue(), // 针对Vue文件解析
vueJsx(), // 针对JSX文件解析
styleImport({ // 按需导入ant-design-vue样式
libs: [
{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/index`
},
},
]})
]
})Vite 的插件众多，由于生产环境基于 Rollup 工具，因此大部分都兼容 Rollup 的插件格式，并且 Vite 已经内置了大量 Rollup 常用的插件，如果需要一些额外插件，则可以在 awesome-vite 中搜索。
当使用了与某些 Rollup 插件有冲突的插件时，为了兼容，可能需要强制设置插件的位置，或者只在构建时使用。可以使用 enforce 修饰符来强制设置插件的位置，代码如下：
// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
{
...image(),
enforce: 'pre' // 在 vite 核心插件之前调用该插件
}
]
})enforce 的取值主要有以下几种：
-
默认值：在
Vite核心插件之后调用该插件。 -
pre：在Vite核心插件之前调用该插件。 -
post：在Vite构建插件之后调用该插件。
默认情况下，插件在开发(serve)和生产(build)模式中都会启用。如果插件在服务或构建期间按需使用，则可使用 apply 属性指明它们仅在 build 或 serve 模式下使用，代码如下：
// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
{
...typescript2(),
apply: 'build' // 该插件仅在build模式下使用
}
]
})注意，这和前面讲到的在最外层判断 serve 和 build 模式进行配置实现的效果是一样的，两者选其一即可。