生产环境白屏最常见的原因是关键资源（JS/CSS/WASM）加载失败，优先通过浏览器开发者工具的网络面板确认资源状态码。

快速定位步骤

前端资源问题主要靠浏览器调试，但服务器配置可用命令行辅助验证：

1. 按 F12 打开开发者工具 → Network 标签页。
2. 筛选 WS、wasm、dll 或 js、css 类型请求。
3. 观察状态码与耗时，点击失败请求查看完整 URL。
4. 若发现 404，检查路径是否缺少前缀；若发现 500 或 MIME 错误，检查服务器配置。

服务器端验证命令（请替换域名为实际地址）：

curl -I https://<your-domain.com>/_framework/dotnet.wasm

检查返回头是否包含 content-type: application/wasm 和 accept-ranges: bytes。

分框架配置检查

不同前端框架的资源路径配置方式不同，请根据项目类型核对：

1. Vue/React 单页应用

确认 index.html 顶部包含 <base href="./">（不可省略斜杠）。检查构建配置文件中路径设置：

// vue.config.js 示例
module.exports = {
  publicPath: './', // 生产环境通常设为相对路径
  outputDir: 'dist'
}

验证所有 <script src>、<link href> 路径是否以 ./ 开头或与 publicPath 一致。

2. Blazor WebAssembly 项目

检查 wwwroot 目录下文件是否完整发布。确认 _framework 目录权限正确。若使用 IIS 或 Nginx 托管，需确保 .wasm 和 .dll 文件未被拦截。

服务器 MIME 类型配置

若服务器未正确配置 MIME 类型，浏览器会拒绝加载 wasm 或特定脚本文件。以下是常见服务器配置示例：

Nginx 配置

在 nginx.conf 或站点配置文件的 http 或 server 块中添加：

types {
    application/wasm wasm;
}

# 或在 location 块中强制指定
location ~* \.(wasm|dll)$ {
    add_header Content-Type application/wasm;
    add_header Access-Control-Allow-Origin *;
}

Apache 配置

在 .htaccess 或 httpd.conf 中添加：

AddType application/wasm .wasm
AddType application/octet-stream .dll

修改配置后请重启服务器生效。

验证与排查

1. 验证资源状态

刷新页面，观察 Network 面板中关键资源状态码是否全部变为 200。页面主体不再为白色，能正常显示内容。

2. 控制台日志

确保控制台无资源加载异常日志（如 Failed to fetch、Cannot find module）。若是 Vue 项目，确认路由切换不再白屏，且无 keep-alive include 匹配错误。

3. CDN 缓存刷新

若使用 CDN，确保缓存已刷新。可在 URL 后追加版本号参数强制刷新，如 app.js?v=1.0.1。

常见坑

• 路径错位：CDN 缓存未命中或资源路径错误，导致 wasm 文件 404。
• 入口缺失：index.html 中入口脚本缺失或被注释，导致整个实例不启动。
• 组件匹配：keep-alive 的 include 使用了路由 name 而非组件 name，在生产环境异步组件场景下直接阻断渲染。
• 浏览器扩展：广告拦截器可能主动阻止 _framework/dotnet.wasm 等关键资源加载，尝试无痕模式排查。
• WebView 限制：H5+ 引擎基于原生 WebView 运行，file://协议下默认禁用跨目录请求，错误常被静默吞没，需添加网络权限。

参考来源

• Vue CLI Official Documentation: Deployment
• Microsoft Learn: Blazor WebAssembly hosting models
• Nginx Official Documentation: MIME types
• MDN Web Docs: HTTP Status Codes