如何在Quasar+Vue3+Vite项目中同步.env变量到Cypress？

核心思路是通过Node脚本自动读取.env文件中的变量，同步到cypress.env.json，无需手动重复维护两份配置。以下是具体步骤：

1. 安装依赖 #

首先安装dotenv包，用于解析.env文件：

npm install dotenv --save-dev
# 或使用yarn
yarn add dotenv -D

2. 编写同步脚本 #

在项目根目录创建scripts/sync-env-to-cypress.js文件，内容如下：

const dotenv = require('dotenv');
const fs = require('fs');

// 读取根目录的.env文件（支持多环境的话可修改此处逻辑）
dotenv.config({ path: '.env' });

// 提取需要同步到Cypress的变量，按需添加
const cypressEnv = {
  API_URL: process.env.VITE_API_URL,
  // 示例：如果还有其他变量需要同步，比如VITE_APP_TITLE
  // APP_TITLE: process.env.VITE_APP_TITLE
};

// 写入cypress.env.json，格式化输出便于阅读
fs.writeFileSync('cypress.env.json', JSON.stringify(cypressEnv, null, 2));
console.log('✅ Cypress环境变量已同步完成');

3. 集成到npm脚本 #

修改package.json的scripts字段，把同步脚本和Cypress启动命令绑定，确保每次启动Cypress前自动同步变量：

"scripts": {
  // 保留原有脚本...
  "sync-env": "node scripts/sync-env-to-cypress.js",
  "cypress:open": "npm run sync-env && cypress open",
  "cypress:run": "npm run sync-env && cypress run"
}

4. 多环境适配（可选） #

如果项目区分开发/生产等多环境（如.env.development、.env.production），可以修改脚本支持环境参数：

const dotenv = require('dotenv');
const fs = require('fs');

// 从命令行获取环境参数，默认development
const targetEnv = process.argv[2] || 'development';
const envFilePath = `.env.${targetEnv}`;

dotenv.config({ path: envFilePath });

const cypressEnv = {
  API_URL: process.env.VITE_API_URL,
};

fs.writeFileSync('cypress.env.json', JSON.stringify(cypressEnv, null, 2));
console.log(`✅ 已同步${targetEnv}环境变量到Cypress`);

对应的npm脚本调整为：

"scripts": {
  "sync-env:dev": "node scripts/sync-env-to-cypress.js development",
  "sync-env:prod": "node scripts/sync-env-to-cypress.js production",
  "cypress:open:dev": "npm run sync-env:dev && cypress open",
  "cypress:open:prod": "npm run sync-env:prod && cypress open"
}

5. 在Cypress中使用变量 #

在测试文件里直接通过Cypress.env('API_URL')即可获取同步后的变量值。

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