vite配置之---共享选项

共享选项

define：vite共享配置之---define-优快云博客

resolve：vite共享配置之---resolve-优快云博客

css：vite共享配置之---css相关-优快云博客

root

在 Vite 中，root 配置项的目的是 指定项目的根目录，即 Vite 服务器和构建命令的起始目录。它定义了 Vite 项目的工作目录，并影响文件解析和构建路径。

• 类型： string
• 默认： process.cwd()

base

开发或生产环境服务的公共基础路径

• 类型： string
• 默认： /
• 相关： server.origin

mode

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

• 类型： string
• 默认： 'development' 用于开发，'production' 用于构建

plugins

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

• 类型： (Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]

publicDir

在 Vite 中，publicDir 用于指定一个目录，该目录中的静态资源将直接作为根路径的文件提供，而不需要经过构建处理。publicDir 是 Vite 配置中的一个选项，默认值是 public。

• 类型： string | false
• 默认： "public"

cacheDir

• 类型： string
• 默认： "node_modules/.vite"

cacheDir配置作用：

1. 存储缓存文件的目录。
2. 此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。
3. 如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。
4. 此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。当没有检测到 package.json 时，则默认为 .vite。

html

cspNonce

vite功能之---内容安全策略（CSP）-优快云博客

• 类型： string
• 相关： 内容安全策略（CSP）

css

modules

在 Vite 中，CSS Modules 是一种用于模块化 CSS 的方法，它将 CSS 类名作用域限定在组件内部，避免了全局样式冲突。Vite 默认支持 CSS Modules，不需要额外的插件配置，但你可以通过配置文件来调整其行为

CSS Modules 的作用

1. CSS Modules 允许你为每个组件编写局部 CSS，确保样式只作用于当前组件，避免了全局样式的污染。这对于大规模的应用程序来说，可以有效管理和隔离样式，防止样式冲突。
2. 例如，你的组件 A 和组件 B 如果都使用了 .button 类，CSS Modules 会自动将它们转化为不同的类名，比如 button_componentA_1a2b3c 和 button_componentB_4d5e6f，这样可以确保它们不会相互影响。

Vite 中的 CSS Modules 配置

Vite 默认支持 CSS Modules，你只需将 .module.css（或 .module.scss, .module.less 等）文件扩展名应用于你的 CSS 文件即可启用模块化。

// vite.config.js
export default {
  css: {
    modules: {
      scopeBehaviour: 'local',  // 默认值是 local，可以设置为 global，决定 CSS 是否是局部作用域
      generateScopedName: '[name]_[local]_[hash:5]', // 自定义生成的类名格式
      localsConvention: 'camelCase' // 导出时将类名转换为 camelCase 形式
      globalModulePaths: [/global\.css$/, /common/]
    },
  },
};

• scopeBehaviour: 'local': 确保 CSS 类名的作用域是局部的（默认值），global 可以用于指定全局样式。
• generateScopedName: 用于指定生成的类名格式，通常会包含原文件名、类名和哈希值。
• localsConvention: 用于配置生成的 CSS 模块导出的命名规则。可以设置为 camelCase（默认值）或 dashes。
• globalModulePaths: 允许你指定一些路径中的 CSS 文件使用全局样式而非模块化样式。

总结

• 作用： CSS Modules 在 Vite 中提供了局部作用域的 CSS 功能，避免了全局样式冲突，使样式在组件级别上隔离。
• 配置： 只需使用 .module.css 或 .module.scss 文件扩展名，Vite 会自动启用 CSS Modules。你可以通过 vite.config.js 文件来进一步定制配置，例如类名格式、作用域等。
• 使用方式： 在组件中导入样式并通过 className={styles.className} 进行应用，Vite 会处理 CSS 类名的模块化和作用域问题。

postcss

在 Vite 中，css.postcss 配置是用来启用和配置 PostCSS 的功能。PostCSS 是一个用 JavaScript 工具处理 CSS 的工具，允许你使用各种插件来处理和优化你的 CSS 文件，例如自动添加浏览器前缀、压缩 CSS、支持 CSS 变量、自动处理媒体查询等。

• 内联的 PostCSS 配置（格式同 postcss.config.js），或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径。
• 对内联的 PostCSS 配置，它期望接收与 postcss.config.js 一致的格式。但对于 plugins 属性有些特别，只接收使用 数组格式。
• 搜索是使用 postcss-load-config 完成的，只有被支持的文件名才会被加载。默认情况下，不会搜索工作区根目录（或 项目根目录，如果未找到工作区）之外的配置文件。如有必要，您可以指定根目录之外的自定义路径来加载特定的配置文件。

preprocessorOptions

指定传递给 CSS 预处理器的选项。文件扩展名用作选项的键。

vite共享选项之---css.preprocessorOptions-优快云博客

preprocessorMaxWorkers

如果启用了这个选项，那么 CSS 预处理器会尽可能在 worker 线程中运行。true 表示 CPU 数量减 1。

• 实验性： 提供反馈
• 类型： number | true
• 默认： 0（不会创建任何 worker 线程，而是在主线程中运行）

devSourcemap

在开发过程中是否启用 sourcemap。

• 实验性： 提供反馈
• 类型： boolean
• 默认： false

transformer

css.transformers 是 Vite 用于处理 CSS 的一个配置项，它允许你通过插件或自定义转换逻辑，对 CSS 文件的生成和处理进行细粒度控制。常见的用途包括：

• 配置 PostCSS 插件（如 autoprefixer、cssnano）。
• 使用自定义的 CSS 转换函数进行文本替换或样式优化。
• 与 CSS 预处理器（如 SCSS、Less）配合使用，增强功能。

lightningcss

在 Vite 中，css.lightningcss 是一个用于 CSS 处理的配置选项，旨在利用 LightningCSS 工具来对 CSS 进行优化。LightningCSS 是一个高效的 CSS 处理工具，特别注重性能和极小的输出大小，通常用于生产环境中，以减少 CSS 文件的大小并提高加载速度。

LightningCSS 是由 CSS 开发者们构建的一个 CSS 编译器，目标是提供 快速、现代化、超小体积 的 CSS 处理。它比传统的 CSS 处理工具（如 PostCSS）更加高效，能够减少代码体积，优化 CSS 输出。它的特点包括：

• 更小的输出体积：通过移除冗余、优化选择器等手段，LightningCSS 能够生成极小的 CSS 文件。
• 性能优化：相比其他传统的 CSS 压缩工具，LightningCSS 运行速度更快，特别是在处理大量 CSS 时。
• 对现代 CSS 特性支持良好：它支持 CSS 自定义属性、CSS Modules、变量和其他现代 CSS 特性。

css.lightningcss 配置项详解

1. enabled (默认: true)

该选项用来启用或禁用 LightningCSS。如果你希望使用 LightningCSS 进行 CSS 压缩和优化，应该将此项设置为 true。如果禁用它，Vite 将会使用默认的 CSS 处理工具进行处理。

2. minify (默认: true)

minify 用来控制是否启用 CSS 文件的压缩。设置为 true 时，Vite 将通过 LightningCSS 对 CSS 进行压缩和优化，移除多余的空白字符、注释、未使用的 CSS 规则等。

3. preset (默认: default)

preset 选项用来配置 LightningCSS 使用的预设。LightningCSS 提供了多个预设，以不同的方式压缩 CSS。有些预设侧重于较小的输出体积，而其他的则关注保留更多的原始样式信息。

4. 与其他 CSS 处理工具的比较

LightningCSS 是一个极其高效的 CSS 编译器，通常在 Vite 中配合现代 JavaScript 打包工具一起使用。它与其他 CSS 工具（如 PostCSS 和 CSSnano）相比具有一些显著优势：

• 性能更快：LightningCSS 在处理大型 CSS 文件时的速度通常比其他工具更快。
• 更小的输出体积：它的压缩算法更高效，能够生成更小的 CSS 文件，适合生产环境使用。
• 无依赖：与一些需要依赖其他工具链的 CSS 压缩器不同，LightningCSS 是一个独立的工具，简化了配置和依赖。

5. 适用场景

启用 css.lightningcss 适合以下几种场景：

• 生产环境优化：当你希望减少 CSS 文件的大小，提高网站的加载速度时，LightningCSS 是一个很好的选择。
• 大规模项目：在需要处理大量 CSS 文件的大型项目中，LightningCSS 的高效性能能够带来显著的优势。
• 快速构建：如果你希望优化构建速度并减少构建时间，LightningCSS 提供的快速编译过程可以显著提升整体构建效率。

envPrefix

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

• 类型： string | string[]
• 默认： VITE_

envDir

用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。

• 类型： string
• 默认： root

customLogger

使用自定义 logger 记录消息。可以使用 Vite 的 createLogger API 获取默认的 logger 并对其进行自定义，例如，更改消息或过滤掉某些警告。

类型：

interface Logger {
  info(msg: string, options?: LogOptions): void
  warn(msg: string, options?: LogOptions): void
  warnOnce(msg: string, options?: LogOptions): void
  error(msg: string, options?: LogErrorOptions): void
  clearScreen(type: LogType): void
  hasErrorLogged(error: Error | RollupError): boolean
  hasWarned: boolean
}

示例：

import { createLogger, defineConfig } from 'vite'

const logger = createLogger()
const loggerWarn = logger.warn

logger.warn = (msg, options) => {
  // 忽略空 CSS 文件的警告
  if (msg.includes('vite:css') && msg.includes(' is empty')) return
  loggerWarn(msg, options)
}

export default defineConfig({
  customLogger: logger,
})

clearScreen

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

• 类型： boolean
• 默认： true