React应用集成UWP应用：WebView加载本地index.html显示空白

我之前也碰到过一模一样的情况，大概率是路径配置或者资源加载的问题，咱们一步步排查解决：

1. 确认React Build文件的UWP项目配置 #

首先得确保你的React build目录已经正确被UWP项目识别并打包：

• 右键UWP项目里的Models/test-app/build文件夹，选择属性
• 把生成操作设置为内容，复制到输出目录设置为如果较新则复制（这样打包时所有build文件才会被包含进APP安装包）
• 检查build下的所有子文件（js、css、静态资源等）是否都继承了这个配置，避免个别资源漏打包

2. 修正React的基础路径配置 #

React默认build后的资源引用都是绝对根路径，如果你把build放在UWP的子目录里，必须修改React项目的基础路径：

• 打开React项目的package.json，新增一行配置："homepage": "."
• 重新执行npm run build，用新生成的build文件替换UWP项目里的旧文件
  这个设置会让React生成的所有资源引用都改用相对路径，完美适配UWP里的子目录结构

3. 验证URI路径的正确性 #

你的URI格式ms-appx-web:///Models/test-app/build/index.html本身是合规的，但要注意两个细节：

• UWP的URI是区分大小写的，检查你的文件夹名称（比如Models是不是写成models了）和文件名是否完全匹配
• 可以先简化路径测试：把build目录直接放到UWP项目根目录，用ms-appx-web:///build/index.html加载，如果能正常显示，说明原路径的层级配置有问题

4. 调试WebView的加载错误 #

如果还是空白，一定要拿到具体的错误信息才能定位问题：

• 给WebView添加NavigationFailed事件监听，输出错误详情：

  using System.Diagnostics;
  
  // 在WebView初始化的代码段中添加
  ReactWebView.NavigationFailed += (sender, args) =>
  {
      Debug.WriteLine($"加载失败: 错误状态={args.WebErrorStatus}, 目标URI={args.Uri}");
  };
  

• 还可以启用WebView远程调试：打开Edge浏览器，输入edge://inspect，找到你的UWP WebView实例，查看控制台里的资源加载错误（比如常见的404找不到js/css文件）

5. 尝试替代加载方式 #

如果以上方法都不行，可以试试直接读取HTML文本加载：

using Windows.Storage;
using Windows.UI.Xaml.Controls;

// 在异步方法中执行以下代码
var htmlFile = await StorageFile.GetFileFromApplicationUriAsync(
    new Uri("ms-appx:///Models/test-app/build/index.html")
);
var htmlContent = await FileIO.ReadTextAsync(htmlFile);
ReactWebView.NavigateToString(htmlContent);

这种方式绕开了URI加载的一些限制，但同样要确保已经完成步骤2的React基础路径配置

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