WebView2加载本地HTML需用file:///三斜杠格式并URI编码中文路径，React Native需设<base>统一相对路径解析，离线包须替换HTTP资源为本地路径并集中管理fallback配置。
WebView2 加载本地 HTML 时 file:// 协议路径失败
直接用 file:// 路径加载 HTML，在 WebView2 中大概率空白或报 net::err_file_not_found。这不是你路径写错了，而是 Chromium 对本地文件的访问做了三重限制：沙箱策略、低完整性级别（Low IL）、同源隔离。
关键修复点不是“怎么拼路径”，而是“怎么让路径被 Chromium 接受”：
- 必须用三斜杠格式：
file:///C:/app/index.html（不是file:/或file://） - 路径含中文或空格必须 URI 编码：
file:///C:/%E6%88%91%E7%9A%84%E5%BA%94%E7%94%A8/index.html - 调试时检查
new Uri(filepath).IsWellFormedOriginalString()返回true，否则 WebView2 会静默丢弃请求 - 企业环境或 MSIX/UWP 应用下，默认禁止
file://访问，需在应用 manifest 中显式声明rescap:Capability Name="runFullTrust"并启用AllowLocalFileAccess策略
React Native WebView 离线包资源路径解析错乱
打包进 android/app/src/main/assets/ 或 ios/mainBundle/ 的 HTML，一旦引用 ./js/app.js 或 ../images/logo.png，就可能在 iOS 和 Android 上行为不一致——iOS 的 WebKit 对相对路径解析更严格，Android 的 WebView（尤其旧版）又容易忽略 ./ 前缀。
统一做法是绕过“相对路径猜谜”，强制基准化：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML
<head>中加<base href="file:///android_asset/">（Android）或<base href="bundle://">（iOS），让所有src/href都以该 base 为起点解析 - 避免混用路径风格：不要一部分写
img/logo.png，另一部分写./img/logo.png；全部统一为img/logo.png（前提是<base>正确） - 构建时用脚本自动重写路径：例如用
sed -i 's/src="\.\///g' index.html批量去掉冗余./，再靠<base>控制源头
离线包内图片/CSS/JS 的 404 与 Mixed Content 混合拦截
离线包解压后资源能加载，但一上真机就 404 或触发 blocked:mixed-content，说明路径本身没问题，问题出在协议和上下文里。
常见陷阱：
- HTML 里写了
<img src="https://cdn.example.com/logo.png">，但离线包没包含这张图，WebView 尝试走网络加载——此时若页面是file://协议，Chrome 会直接拦截 HTTPS 请求（Mixed Content 不允许从file://发起 HTTPS） - CSS 里
background: url(http://xxx)没被替换，离线包里也没存对应资源，运行时 JS 动态 setStyle 就会触发拦截 - 第三方 SDK（如老版友盟统计）硬编码了 HTTP 请求，在离线环境下无法降级，直接卡死资源链
修复必须前置：离线包构建阶段就扫描所有 http:// 和 https://，替换成 ./ 相对路径，并确认对应文件已打入包内。
降级逻辑里路径未同步导致 fallback 失效
设计了“离线包加载失败 → 切 CDN”的降级，但 fallback 的 CDN 地址却写成 https://cdn.example.com/v1.2.3/app.js，而线上实际部署的是 /static/app-v1.2.3.js——路径不匹配，降级等于没做。
真正可靠的 fallback 路径管理方式：
- 所有资源路径通过一个配置对象集中定义：
const ASSETS = { js: './js/app.js', css: './css/style.css' }，离线包和在线模式共用同一套 key - 构建时用环境变量注入真实路径：
ASSETS.js = process.env.NODE_ENV === 'production' ? '/static/app.js' : './js/app.js' - 降级函数里不做字符串拼接，只取配置值：
fetch(ASSETS.js).catch(() => loadFallback(ASSETS.js))，确保路径始终一致
跨平台离线加载最麻烦的从来不是“怎么打包”，而是“路径在不同容器里被解析成什么”。别信“本地能跑就行”，每个平台的 URI 解析规则、安全策略、base URL 默认值都不同——得一个个测，而不是靠猜。
