Skip to content

配置 Vite

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

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

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

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

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

bash
vite --config my-config.js

加载配置文件

默认情况下,Vite 使用 esbuild 将配置文件打包到临时文件中并加载它。这可能会在 monorepo 中导入 TypeScript 文件时引发问题。如果你遇到了这种方法问题,可以通过指定 --configLoader runner 以改用 module runner,它不会创建临时配置并将动态转换任何文件。请注意,module runner 不支持配置文件中的 CJS,但外部 CJS 包应该可以正常工作。

另外,如果你正在使用支持TypeScript的环境(例如 node --experimental-strip-types),或者只编写纯 JavaScript 代码,你可以指定 --configLoader native 以使用环境的本机运行时加载配置文件。请注意,配置文件导入的模块的更新不会被检测到,因此不会自动重启 Vite 服务器。

配置智能提示

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

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

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

js
import { defineConfig } from 'vite'

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

Vite 也直接支持 TypeScript 配置文件。你可以在 vite.config.ts 中使用上述的 defineConfig 工具函数,或者 satisfies 运算符:

ts
import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig

情景配置

如果配置文件需要基于(servebuild)命令或者不同的 模式 来决定选项,亦或者是一个 SSR 构建(isSsrBuild)、一个正在预览的构建产物(isPreview),则可以选择导出这样一个函数:

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

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

isSsrBuildisPreview 是额外的可选标志,用于区分 buildserve 命令的类型。一些加载 Vite 配置的工具可能不支持这些标志,而会传递 undefined。因此,建议使用 truefalse 的显式比较。

异步配置

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

js
export default (async ({ ,  }) => {
  const  = await asyncFunction()
  return {
    // vite 配置
  }
})

在配置中使用环境变量

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

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

js
import { ,  } from 'vite'

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

在 VS Code 上调试配置文件

在默认的 --configLoader bundle 行为下,Vite 会将生成的临时配置文件写入 node_modules/.vite-temp 文件夹,在 Vite 配置文件中设置断点调试时会出现文件未找到的错误。要修复该问题,请在 .vscode/settings.json 中添加以下配置:

json
{
  "debug.javascript.terminalOptions": {
    "resolveSourceMapLocations": [
      "${workspaceFolder}/**",
      "!**/node_modules/**",
      "**/node_modules/.vite-temp/**"
    ]
  }
}

Released under the MIT License. (dev)