为多环境配置Cypress：不同baseUrl与apiUrl的最优方案咨询

针对你需要适配dev、prod等多环境的需求，下面提供几种实用方案，结合Cypress v10+的特性给出最优选择：

方案一：多独立配置文件（带基础配置继承） #

这是你倾向的方案，适合环境配置差异较大的场景，可通过配置继承减少重复代码：

步骤1：创建基础配置文件 #

新建cypress-base.config.ts存放通用配置：

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    defaultCommandTimeout: 10000,
    viewportWidth: 1280,
    viewportHeight: 720,
    // 其他通用配置
  }
});

步骤2：创建各环境专属配置文件 #

• cypress-dev.config.ts：

import { defineConfig } from 'cypress';
import baseConfig from './cypress-base.config';

export default defineConfig({
  ...baseConfig,
  e2e: {
    ...baseConfig.e2e,
    baseUrl: 'http://base.url.com',
    env: {
      apiUrl: 'http://base.url.com/api'
    }
  }
});

• cypress-prod.config.ts：

import { defineConfig } from 'cypress';
import baseConfig from './cypress-base.config';

export default defineConfig({
  ...baseConfig,
  e2e: {
    ...baseConfig.e2e,
    baseUrl: 'https://prod.url.com',
    env: {
      apiUrl: 'https://prod-api.url.com/v1'
    }
  }
});

步骤3：配置npm脚本 #

在package.json中添加运行脚本：

{
  "scripts": {
    "cy:dev": "cypress run --config-file cypress-dev.config.ts",
    "cy:prod": "cypress run --config-file cypress-prod.config.ts",
    "cy:dev:open": "cypress open --config-file cypress-dev.config.ts"
  }
}

优点：各环境配置完全独立，可灵活扩展不同环境的专属设置（如测试插件、超时时间）；通过继承减少重复代码。
缺点：环境较多时配置文件数量会增加。

方案二：单一配置文件+环境变量动态切换 #

适合仅baseUrl、apiUrl等少数配置差异的场景，配置集中管理，切换便捷：

步骤1：修改主配置文件 #

在cypress.config.ts中根据环境变量动态加载配置：

import { defineConfig } from 'cypress';

// 定义所有环境的配置
const envConfigs = {
  development: {
    baseUrl: 'http://base.url.com',
    apiUrl: 'http://base.url.com/api'
  },
  production: {
    baseUrl: 'https://prod.url.com',
    apiUrl: 'https://prod-api.url.com/v1'
  }
};

// 获取当前环境（默认development）
const currentEnv = process.env.CYPRESS_ENV || 'development';
const activeConfig = envConfigs[currentEnv];

export default defineConfig({
  e2e: {
    baseUrl: activeConfig.baseUrl,
    env: {
      apiUrl: activeConfig.apiUrl
    },
    // 其他通用配置
  }
});

步骤2：配置npm脚本 #

{
  "scripts": {
    "cy:dev": "CYPRESS_ENV=development cypress run",
    "cy:prod": "CYPRESS_ENV=production cypress run",
    // Windows环境用set命令：
    "cy:dev:win": "set CYPRESS_ENV=development && cypress run"
  }
}

在测试代码中调用 #

直接通过Cypress内置方法获取配置：

// 获取baseUrl
const baseUrl = Cypress.config('baseUrl');
// 获取apiUrl
const apiUrl = Cypress.env('apiUrl');

优点：单文件集中管理所有环境配置，切换仅需修改环境变量，代码简洁。
缺点：若各环境有大量差异化配置，会导致配置对象过于庞大。

方案三：直接通过npm脚本传递参数 #

适合环境极少、配置项简单的场景，无需修改配置文件：

配置npm脚本 #

{
  "scripts": {
    "cy:dev": "cypress run --baseUrl http://base.url.com --env apiUrl=http://base.url.com/api",
    "cy:prod": "cypress run --baseUrl https://prod.url.com --env apiUrl=https://prod-api.url.com/v1"
  }
}

优点：无需修改配置文件，最轻量化的实现方式。
缺点：配置项较多时脚本会冗长，不利于维护。

关于你提到的嵌套env配置的调用方式 #

如果采用你最初设想的嵌套env结构：

e2e: {
  env: {
    development: {
      baseUrl: 'http://base.url.com',
      apiUrl: 'http://base.url.com/api'
    },
    production: {
      baseUrl: 'https://prod.url.com',
      apiUrl: 'https://prod-api.url.com/v1'
    }
  }
}

在测试代码中需要先指定环境再获取配置：

// 假设通过环境变量传递当前环境
const currentEnv = Cypress.env('currentEnv') || 'development';
const envConfig = Cypress.env(currentEnv);
const baseUrl = envConfig.baseUrl;
const apiUrl = envConfig.apiUrl;

但这种方式不如方案二的动态加载简洁，不推荐。

最优方案推荐 #

• 若各环境有大量差异化配置（如不同的插件、超时设置）：选择方案一；
• 若仅baseUrl、apiUrl等少数配置不同：选择方案二，兼顾简洁性和可维护性；
• 若仅2-3个环境且配置极简：选择方案三。

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