Cypress cy.visit()本地运行正常 Gitlab CI执行报404错误如何解决

• CI流水线未提前执行项目构建命令：你配置的start:ci脚本是直接serve dist目录下的产物，但是现有Gitlab CI任务中只执行了依赖安装，没有执行打包命令生成dist目录，本地环境因为之前手动执行过构建，dist目录存在所以运行正常，CI环境中dist目录为空或不存在，serve请求直接返回404。
• 环境变量冲突：如果CI环境预设了PORT变量，服务实际启动端口会和预期的3000不一致，访问3000端口自然返回错误。
• 脚本环境变量传递错误：package.json中的test脚本写法存在问题，cross-env NODE_ENV=test && ...的写法只会将环境变量传递给&&前的空命令，后续测试/构建流程拿不到NODE_ENV=test的配置，可能导致产物生成路径异常。
• serve命令路径异常：serve dist使用相对路径，部分CI环境的工作目录可能和预期不一致，导致serve找不到目标目录。

• 先在CI脚本中新增目录校验逻辑，在npm ci后增加npm run build && ls -la dist，确认dist目录正常生成且包含index.html等入口文件。
• 新增端口校验逻辑，在执行test:ci前执行echo $PORT && curl -v http://localhost:3000，确认端口未被占用、服务正常响应。
• 给start:ci脚本增加debug参数：serve dist --no-clipboard --listen ${PORT:-3000} --debug，查看serve启动时的实际目录和端口配置。

1. 补充CI构建步骤，修改Gitlab CI配置如下：

tests:
  image: cypress/base:10
  stage: tests
  script:
    - npm ci
    - npm run build # 新增构建命令，生成dist目录产物
    - npm run test:ci

2. 修复package.json中的环境变量传递问题：

"scripts": {
  "start:ci": "serve $(pwd)/dist --no-clipboard --listen ${PORT:-3000}", // 改为绝对路径避免目录识别错误
  "test": "cross-env NODE_ENV=test npm run test:jest && npm run test:cypress", // 去掉多余的&&，确保环境变量正常传递
  "test:ci": "start-server-and-test start:ci http://localhost:${PORT:-3000} test", // 动态读取端口，避免变量冲突
  "test:cypress": "cypress run --headless",
  "test:jest": "jest",
}

内容的提问来源于stack exchange，提问作者red house 87