配置文件

配置文件解析

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件。

最基础的配置文件是这样的：

  1. // vite.config.js
  2. export default {
  3.   // 配置选项
  4. }

注意，即使项目没有在 package.json 中开启 type: "module" ，Vite 也支持在配置文件中使用 ESM 语法。在这种情况下，配置文件是在加载之前自动预处理的。

你可以显式地通过 --config 命令行选项指定一个配置文件（解析会相对于 cwd 路径）

  1. vite --config my-config.js

配置智能提示

因为 Vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来进行智能提示：

  1. /**
  2.  * @type {import('vite').UserConfig}
  3.  */
  4. const config = {
  5.   // ...
  6. }
  8. export default config

另外你可以使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示：

  1. import { defineConfig } from 'vite'
  3. export default defineConfig({
  4.   // ...
  5. })

Vite 也直接支持 TS 配置文件。你可以在 vite.config.ts 中使用 defineConfig 帮手函数。

情景配置

如果配置文件需要基于（serve 或 build）命令或者不同的 模式 来决定选项，则可以选择导出这样一个函数：

  1. export default ({ command, mode }) => {
  2.   if (command === 'serve') {
  3.     return {
  4.       // serve 独有配置
  5.     }
  6.   } else {
  7.     return {
  8.       // build 独有配置
  9.     }
  10.   }
  11. }

异步配置

如果配置需要调用一个异步函数，也可以转而导出一个异步函数：

  1. export default async ({ command, mode }) => {
  2.   const data = await asyncFunction()
  3.   return {
  4.     // 构建模式所需的特有配置
  5.   }
  6. }