Nx e2e Cypress执行器中cypress.env.json不覆盖cypress.json env配置问题

你遇到的问题是Nx 12.x版本的@nrwl/cypress执行器的默认行为和原生Cypress不同导致的：原生Cypress启动时会自动读取同级目录下的cypress.env.json文件，覆盖cypress.json中的同名环境变量，但Nx 12.9版本的Cypress执行器默认不会主动加载该文件，因此你配置的覆盖规则不会生效。

你可以选择以下任意一种方式解决：

方案1：在执行器配置中指定envFile参数（推荐） #

找到你的Nx工作区根目录下的workspace.json（或者angular.json），定位到对应e2e项目的e2e执行器配置，在options节点下添加envFile参数，指向你的cypress.env.json文件路径：

{
  "projects": {
    "your-app-e2e": {
      "targets": {
        "e2e": {
          "executor": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/your-app-e2e/cypress.json",
            "envFile": "apps/your-app-e2e/cypress.env.json", // 添加这一行
            "devServerTarget": "your-app:serve"
          }
        }
      }
    }
  }
}

注意：请将路径替换为你实际的cypress.env.json存放路径，建议将该文件和cypress.json同级放在e2e项目根目录（apps/your-app-e2e/）下，不要放在src目录内。

方案2：通过Cypress插件手动加载配置 #

如果不想修改工作区配置，也可以在Cypress插件中手动读取并合并环境变量，编辑apps/your-app-e2e/src/plugins/index.js文件，添加如下代码：

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

module.exports = (on, config) => {
  // 读取cypress.env.json文件
  const envFilePath = path.resolve(__dirname, '../../cypress.env.json');
  if (fs.existsSync(envFilePath)) {
    const customEnv = JSON.parse(fs.readFileSync(envFilePath, 'utf-8'));
    // 合并环境变量，cypress.env.json的优先级更高
    config.env = { ...config.env, ...customEnv };
  }
  return config;
};

方案3：升级@nrwl/cypress版本 #

如果你可以接受升级依赖，将@nrwl/cypress升级到12.10.0及以上版本，该版本之后官方已经默认支持cypress.env.json的自动加载，不需要额外配置即可和原生Cypress行为保持一致。

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