配置 Vite

当以命令行方式运行 vite 时，Vite 会自动解析项目根目录下名为 vite.config.js 的配置文件（也支持其他 JS 和 TS 扩展名）。

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

// vite.config.js
export default {
  // 配置选项
}

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

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

bash

vite --config my-config.js

配置智能提示

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

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

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

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

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

情景配置

Invalid code snippet option

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

If the config needs to conditionally determine options based on the command (serve or build), the mode being used, if it's an SSR build (isSsrBuild), or is previewing the build (isPreview), it can export a function instead:

cb28b1ffb3de626548c59cb2211f8f1cdfcd07d0

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

需要注意的是，在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。

Invalid code snippet option

`ssrBuild` 仍是实验性的。它只在构建过程中可用，而不是一个更通用的 `ssr` 标志，因为在开发过程中，我们唯一的服务器会共享处理 SSR 和非 SSR 请求的配置。某些工具可能没有区分浏览器和 SSR 两种构建目标的命令，那么这个值可能是 `undefined`，因此需要采用显式的比较表达式。

isSsrBuild and isPreview are additional optional flags to differentiate the kind of build and serve commands respectively. Some tools that load the Vite config may not support these flags and will pass undefined instead. Hence, it's recommended to use explicit comparison against true and false.

cb28b1ffb3de626548c59cb2211f8f1cdfcd07d0

异步配置

如果配置需要调用一个异步函数，也可以转而导出一个异步函数。这个异步函数也可以通过 defineConfig 传递，以便获得更好的智能提示：

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // vite 配置
  }
})

在配置中使用环境变量

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

配置 Vite #

配置智能提示 #

情景配置 #

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

异步配置 #