Playwright启动前后端服务时如何分别使用对应目录的.env文件？

方案一：使用dotenv-cli加载后端.env并清除继承变量 #

• 1. 进入后端目录安装dotenv-cli：
     cd ../backend && npm install dotenv-cli --save-dev
• 2. 修改playwright.config.ts中的后端webServer配置：

// playwright.config.ts
webServer: [
  {
    // start frontend
    command: "npm run start",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  {
    // start backend
    command: "cd ../backend && dotenv --clean -e .env -- node server",
    port: 3001,
    reuseExistingServer: !process.env.CI,
  },
]

--clean参数会清除从前端启动进程继承的所有环境变量，仅加载backend/.env中的配置，彻底避免变量冲突。

方案二：清空后端进程继承的环境变量，后端自行加载.env #

• 1. 确保后端已安装dotenv：
     cd ../backend && npm install dotenv --save
• 2. 在后端server.js顶部添加加载代码：

// backend/server.js
require('dotenv').config({ path: './.env' }); // 明确加载当前目录的.env
// 后续服务启动代码...

• 3. 修改playwright.config.ts中的后端配置，清空继承的环境变量：

// playwright.config.ts
webServer: [
  {
    // start frontend
    command: "npm run start",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  {
    // start backend
    command: "cd ../backend && node server",
    port: 3001,
    reuseExistingServer: !process.env.CI,
    env: {}, // 清空继承的环境变量，避免前端.env干扰
  },
]

通过env: {}让后端进程启动时不继承前端环境变量，再由后端主动加载本地.env，保证前后端配置完全独立。

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