Skip to content

配置 Vite

配置文件

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

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

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

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

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

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 工具函数。

情景配置

如果配置文件需要基于(dev/servebuild)命令或者不同的 模式 来决定选项,亦或者是一个 SSR 构建(ssrBuild),则可以选择导出这样一个函数:

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

需要注意的是,在 Vite 的 API 中,在开发环境下 command 的值为 serve(在 CLI 中, vite devvite servevite 的别名),而在生产环境下为 buildvite build)。

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

异步配置

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

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

环境变量

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

注意 Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,rootenvDir 选项会影响加载行为。不过当你的确需要时,你可以使用 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__: env.APP_ENV
    }
  }
})