Vue.js(Nuxt)项目CircleCI v2+Cypress测试显示空白问题求助

我遇到过好几个类似的Nuxt+Cypress+CircleCI的问题，给你几个针对性的排查方向，应该能找到根源：

虽然你用curl能拿到HTML，但很可能CircleCI里Nuxt服务刚启动就触发了Cypress测试，这时候客户端的Vue还没完成hydration（服务端渲染内容和客户端匹配的过程）。解决方法是用wait-on这类工具等待服务完全就绪：

# 先安装依赖
npm install wait-on --save-dev
# 在CircleCI的config.yml里修改启动命令
npm run start & wait-on http://localhost:3000

这样能保证Cypress访问页面时，Nuxt已经完成初始化。

本地用的是Cypress自带的Electron，但CircleCI的环境可能存在权限或版本差异。可以在运行测试时开启verbose日志，看看有没有资源加载失败的情况：

npx cypress run --browser electron --verbose

重点看日志里有没有JS文件404、CSP（内容安全策略）阻止脚本执行，或者Electron启动报错的信息——这些都可能导致页面空白。

空白页的核心原因往往是Vue没有成功加载或初始化。可以在你的Cypress测试里加几个验证步骤：

cy.visit('/')
// 确认Vue全局对象存在
cy.window().its('Vue').should('exist')
// 确认页面有实际渲染的内容（不是空的服务端HTML）
cy.get('[data-testid="your-page-content"]').should('be.visible')

另外，Cypress在测试失败时会自动截图，你可以查看CircleCI上的截图，右键“查看页面源代码”，对比本地的HTML，看Nuxt的客户端chunk（比如_nuxt/xxx.js）路径是否正确，有没有加载失败。

有时候CircleCI上的环境配置（比如NODE_ENV、Nuxt的API地址变量）和本地不一致，导致Vue初始化时出错。可以在CircleCI的脚本里打印环境变量确认：

echo "当前环境：$NODE_ENV"
printenv | grep NUXT_

如果CircleCI用的是production环境，而本地是development，要确认生产构建的资源路径、静态文件配置有没有问题。

服务端渲染时的错误（比如路由匹配失败、asyncData获取数据出错）也会导致客户端无法正常渲染。可以把Nuxt的日志输出到文件，测试后查看：

# 启动服务时保存日志
npm run start > nuxt-server.log 2>&1 &
# 测试完成后查看日志
cat nuxt-server.log

日志里的报错信息往往能直接指向问题根源。

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