如何在Vite生产环境、Cypress组件测试及测试脚本中正确加载文件？

问题根源 #

生产环境中，fetch("/data.yaml")能正常访问Vite public目录下的资源，但Cypress测试（组件测试/脚本导入场景）中存在两个核心问题：

1. 测试环境下，/data.yaml的路径解析逻辑与生产环境不一致，导致fetch无法定位资源；
2. 异步fetch的时序问题，会导致测试脚本导入foo.ts时，data对象还未被填充。

推荐方案：环境区分式加载（同步+异步结合） #

利用Vite的静态资源处理能力，针对生产环境和测试环境分别采用不同的加载方式，既保留生产环境的异步加载优势，又解决测试环境的路径与时序问题。

步骤1：配置Vite支持YAML导入

安装依赖并配置Vite插件，让项目可以直接导入YAML文件：

npm install @rollup/plugin-yaml yaml --save-dev

在vite.config.ts中添加插件：

import { defineConfig } from 'vite'
import yaml from '@rollup/plugin-yaml'

export default defineConfig({
  plugins: [yaml()]
})

步骤2：修改foo.ts实现多环境兼容

// foo.ts
import yaml from 'yaml'
import rawData from './public/data.yaml'

// 初始化数据对象
export const data = import.meta.env.PROD ? {} : rawData

// 生产环境保持异步fetch加载（适合大文件场景）
if (import.meta.env.PROD) {
  fetch('/data.yaml')
    .then(response => response.text())
    .then(text => Object.assign(data, yaml.parse(text)))
}

备选方案1：Cypress中Mock Fetch请求 #

如果不想修改业务代码，可以在Cypress测试中拦截/data.yaml的请求，直接返回本地文件内容：

// 在测试文件或cypress/support/commands.js中添加
cy.intercept('GET', '/data.yaml', () => {
  return cy.readFile('public/data.yaml', 'utf8')
}).as('loadYaml')

// 测试时等待请求完成（组件测试场景）
cy.wait('@loadYaml')

备选方案2：统一测试环境BaseUrl #

在Cypress配置中指定Vite开发服务器的地址，确保fetch能正确访问public资源：

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'vue' // 替换为你的项目框架（react/angular等）
    },
    baseUrl: 'http://localhost:5173' // Vite默认开发端口
  }
})

方案对比 #

内容的提问来源于stack exchange，提问作者SIGSTACKFAULT