共享配置

root

  • 类型： string

  • 默认： process.cwd()

    项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的路径。

    更多细节请见 项目根目录。

base

  • 类型： string

  • 默认： /

    开发或生产环境服务的公共基础路径。合法的值包括以下几种：

    • 绝对 URL 路径名，例如 /foo/
    • 完整的 URL，例如 https://foo.com/
    • 空字符串或 ./（用于开发环境）

    更多信息详见 公共基础路径。

mode

  • 类型： string

  • 默认： 'development' (开发模式)，'production' (生产模式)

    在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。

    查看 环境变量与模式 章节获取更多细节。

define

  • 类型： Record<string, string>

    定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换。

    • 从 2.0.0-beta.70 版本开始，字符串值将作为一个直接的表达式，所以如果定义为了一个字符串常量，它需要被显式地引用（例如：通过 JSON.stringify）。

    • 替换只会在匹配到周围是单词边界（\b）时执行。

    由于它是通过直接替换文本实现的，因此无需任何语法分析。我们建议只对 CONSTANTS 使用 define。

    例如，process.env.FOO 和 __APP_VERSION__ 就非常适合。但 process 或 global 不应使用此选项。变量相关应使用 shim 或 polyfill 代替。

plugins

  • 类型： (Plugin | Plugin[])[]

    将要用到的插件数组。Falsy 虚值的插件将被忽略，插件数组将被扁平化（flatten）。查看 插件 API 获取 Vite 插件的更多细节。

publicDir

  • 类型： string

  • 默认： "public"

    作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。

    欲了解更多，请参阅 public 目录。

cacheDir

  • 类型： string

  • 默认值： "node_modules/.vite"

    存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。

resolve.alias

  • 类型： Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

    将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组.

    当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。

    更高级的自定义解析方法可以通过 插件 实现。

resolve.dedupe

  • 类型： string[]

    如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。

resolve.conditions

  • 类型： string[]

    在解析包的 情景导出 时允许的附加条件。

    一个带有情景导出的包可能在它的 package.json 中有以下 exports 字段：

    1. {
    2.   "exports": {
    3.     ".": {
    4.       "import": "./index.esm.js",
    5.       "require": "./index.cjs.js"
    6.     }
    7.   }
    8. }

    在这里，import 和 require 被称为“情景”。情景可以嵌套，并且应该从最特定的到最不特定的指定。

    Vite 有一个“允许的情景”列表和并且会匹配列表中第一个情景。默认允许的情景是：import，module，browser，default，和基于当前情景为 production/development。resolve.conditions 配置项使得可以指定其他允许的情景。

resolve.mainFields

  • 类型： string[]

  • 默认： ['module', 'jsnext:main', 'jsnext']

    package.json 中，在解析包的入口点时尝试的字段列表。注意，这比从 exports 字段解析的情景导出优先级低：如果一个入口点从 exports 成功解析，主字段将被忽略。

resolve.extensions

  • 类型： string[]

  • 默认： ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

    导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会干扰 IDE 和类型支持。

css.modules

  • 类型：

    1. interface CSSModulesOptions {
    2.   scopeBehaviour?: 'global' | 'local'
    3.   globalModulePaths?: string[]
    4.   generateScopedName?:
    5.     | string
    6.     | ((name: string, filename: string, css: string) => string)
    7.   hashPrefix?: string
    8.   /**
    9.    * 默认：'camelCaseOnly'
    10.    */
    11.   localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
    12. }

    配置 CSS modules 的行为。选项将被传递给 postcss-modules。

css.postcss

  • 类型： string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })

    内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。

    注意，如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源。

css.preprocessorOptions

  • 类型： Record<string, object>

    指定传递给 CSS 预处理器的选项。例如:

    1. export default {
    2.   css: {
    3.     preprocessorOptions: {
    4.       scss: {
    5.         additionalData: `$injectedColor: orange;`
    6.       }
    7.     }
    8.   }
    9. }

json.namedExports

  • 类型： boolean

  • 默认： true

    是否支持从 .json 文件中进行按名导入。

json.stringify

  • 类型： boolean

  • 默认： false

    若设置为 true，导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好，尤其是当 JSON 文件较大的时候。

    开启此项，则会禁用按名导入。

esbuild

  • 类型： ESBuildOptions | false

    ESBuildOptions 继承自 esbuild 转换选项。最常见的用例是自定义 JSX：

    1. export default {
    2.   esbuild: {
    3.     jsxFactory: 'h',
    4.     jsxFragment: 'Fragment'
    5.   }
    6. }

    默认情况下，ESbuild 应用在 ts、jsx、tsx 文件。你可以通过 esbuild.include 和 esbuild.exclude 对其进行配置，它们两个配置的类型是string | RegExp | (string | RegExp)[]。

    此外，你还可以通过esbuild.jsxInject来自动为每一个被 ESbuild 转换的文件注入 JSX helper。

    1. export default {
    2.   esbuild: {
    3.     jsxInject: `import React from 'react'`
    4.   }
    5. }

    设置为 false 来禁用 ESbuild 转换。

assetsInclude

  • 类型： string | RegExp | (string | RegExp)[]

  • 相关内容： 静态资源处理

    指定其他文件类型作为静态资源处理，因此：

    • 当从 HTML 引用它们或直接通过 fetch 或 XHR 请求它们时，它们将被插件转换管道排除在外。

    • 从 JavaScript 导入它们将返回解析后的 URL 字符串（如果你有一个 enforce: 'pre' 插件来处理不同的资产类型，这可能会被覆盖）。

    内建支持的资源类型列表可以在 这里 找到。

logLevel

  • 类型： 'info' | 'warn' | 'error' | 'silent'

    调整控制台输出的级别，默认为 'info'。

clearScreen

  • 类型： boolean

  • 默认： true

    设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。