Vite（六）配置 Vite

Vite（六）配置 Vite

• 网址：https://vitejs.cn/guide/why.html

1. 配置 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}
 */
const config = {
   
   
  // ...
}

export default config

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

import {
   
    defineConfig } from 'vite'

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

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

#情景配置

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

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

#共享配置

#root

• 类型： string

• 默认： process.cwd()

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

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

#base

• 类型： string

• 默认： /

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

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

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

#mode

• 类型： string

• 默认： serve 时默认 'development'，build 时默认 'production'

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

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

#define

• 类型： Record<string, string>

  定义全局变量替换方式。每项在开发时会被定义为全局变量，而在构建时则是静态替换。

  • 从 2.0.0-beta.70 版本开始，字符串值将作为一个直接的表达式，所以如果定义为了一个字符串常量，它需要被显式地引用（例如：通过 JSON.stringify）。
  • 替换只会在匹配到周围是单词边界（\b）时执行。

#plugins

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

  将要用到的插件数组。查看 插件 API 获取 Vite 插件的更多细节。

#publicDir

• 类型： string

• 默认： "public"

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

#resolve.alias

• 类型：

  Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

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

  当使用文件系统路径的别名时，请始终使用绝对路径。相对路径作别名值将按原样使用导致不会解析到文件系统路径中。

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

#resolve.dedupe

• 类型： string[]

  如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这