Vue3框架搭建5：配置说明-vite.config

关注

原创最新推荐文章于 2026-04-14 09:54:10 发布 463 阅读 AI 写同款· GEO 优化 ›

深度剖析 Vite 配置文件因为配置文件代码可能会有第三方库的依赖，所以当第三方库依赖的代码更改时，Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改，再重启 DevServer ，来保证当前生效的配置永远是最新的。不过，后面 Vite 还会处理一些边界情况，在用户配置不合理的时候，给用户对应的提示。这里的逻辑稍微有点复杂，很难梳理清楚，所以我们不妨借助刚才梳理的配置解析流程，深入 loadConfigFromFile 的细节中，研究下 Vite 对于配置文件加载的实现思路。阅读详情

vitest.config.ts：

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig( //配置合并和导出
  viteConfig,
  defineConfig({ //Vitest 特定配置
    test: {
      environment: 'jsdom', //设置测试环境为 jsdom，这是一个模拟浏览器环境的 JavaScript 实现
      exclude: [...configDefaults.exclude, 'e2e/**'], //指定要排除的测试文件，这里扩展了默认的排除列表，额外排除了 'e2e/' 目录下的文件
      root: fileURLToPath(new URL('./', import.meta.url))//设置测试的根目录，使用 fileURLToPath 和 import.meta.url 确保跨平台兼容性
    }
  })
)

配置文件作用：

合并项目的 Vite 配置和 Vitest 特定的测试配置。
设置测试环境为 jsdom，这对于测试需要浏览器环境的前端代码很有用。
排除端到端测试（e2e）文件，这些通常需要不同的设置和环境。
明确指定测试的根目录。
这种配置适用于一个同时使用 Vite 进行开发和 Vitest 进行单元测试的项目。通过合并配置，可以确保测试环境与开发环境保持一致性，同时又能针对测试进行特定的设置。