React/Vite项目Vitest HTML Reporter页面空白问题求助

先解决本地预览问题 #

别用vite preview，它是用来预览Vite打包的项目产物的，Vitest生成的HTML报告是普通静态文件，用静态文件服务器更合适：

• 全局安装http-server：npm install -g http-server
• 进入报告目录：cd reports/html
• 启动服务：http-server
• 访问http://localhost:8080，如果能正常显示报告，说明问题出在预览工具的选择上，部署时用普通静态文件服务即可。

排查资源路径问题 #

如果用静态服务器还是空白，打开reports/html/index.html，检查里面的CSS、JS引用路径：

• 如果路径是绝对路径（比如/assets/report.css），部署时如果你的报告不是放在服务器根目录，就会找不到资源。
• 手动把绝对路径改成相对路径（比如./assets/report.css），再刷新页面试试。

调整Vitest配置，确保报告生成正确 #

试试修改Vitest的reporter配置方式，避免路径配置错误：

test: {
  globals: true,
  environment: 'jsdom',
  setupFiles: ['src/setupTest.ts'],
  reporters: [
    'junit',
    // 用数组形式配置html reporter，明确指定输出路径
    ['html', { outputFile: './reports/html/index.html' }]
  ],
  outputFile: { junit: './reports/junit/junit-report.xml' },
  coverage: {
    reportsDirectory: './reports/coverage',
    reporter: ['cobertura'],
  },
},

重新执行测试，确认reports/html目录下生成了index.html和完整的assets文件夹（包含css、js文件）。

部署时注意事项 #

部署到服务器时，确保把整个reports/html目录上传，不要只传index.html。如果服务器有路径前缀，需要确保报告里的资源路径是相对路径，或者根据前缀调整路径。

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