鸿蒙 webview 中 rawfile 资源路径 404 的根本原因是 loadfile() 不推导 html 所在目录，相对路径统一按 resources/base/rawfile/ 根目录拼接，而实际文件是扁平化部署；必须在 loadfile 前调用 webview.setbasepath("resources/base/rawfile/")（末尾带斜杠），否则所有 src/href 失效；/css/app.css 等绝对路径写法无效；真机大小写敏感；推荐预加载 html 并正则重写路径为 arkwebview://rawfile/ 前缀，再 loaddatawithbaseurl 加载，确保 js 动态资源也生效。
鸿蒙 WebView 中 rawfile 资源路径为何总 404？
根本不是文件没放对，而是鸿蒙的 loadFile() 不会推导“当前 HTML 所在目录”，它把所有相对路径（如 ./css/app.css）都按 resources/base/rawfile/ 根目录去拼——而该目录下实际只有扁平化的一层文件。结果就是浏览器发请求到 resources/base/rawfile/./css/app.css，自然 404。
关键动作只有一条：webview.setBasePath("resources/base/rawfile/")（注意末尾斜杠），且必须在 loadFile("index.html") 之前调用。否则所有 src、href 都失效。
-
<base href=".">在鸿蒙里完全无效，别白费劲 - 写成
/css/app.css也不行——鸿蒙不支持以/开头的绝对路径映射到 rawfile - 真机上大小写敏感，
Main.css和main.css是两个文件，404 可能只是拼错了大小写
离线包资源路径如何统一映射才可靠？
推荐用预加载 + 路径重写方案，而不是依赖 setBasePath 或协议拦截。因为 JS 动态创建的资源（比如 new Image().src = "img/logo.png"）不受 setBasePath 影响，而 arkwebview:// 协议又得额外写拦截逻辑。
实操步骤：
- 用
getRawFile("index.html")读取 HTML 字符串 - 正则替换所有
src="xxx"、href="xxx"、url(xxx)中的路径，补前缀：src="arkwebview://rawfile/xxx" - 调用
loadDataWithBaseURL(htmlStr, "arkwebview://rawfile/", "text/html", "UTF-8", null) - CSS 里的
@import和 JS 的fetch("./data.json")同样要替换，否则照样 404
离线包版本校验失败后怎么降级？
不能等页面白屏了再处理。校验必须前置到 HTML 加载前，且需分层：本地缓存版本号匹配 → 关键资源哈希校验 → 网络兜底拉取。
典型陷阱：
- 只比对
localStorage.getItem("pkg_version")，但没检查文件是否真实存在——用户清过缓存，版本号还在，资源已丢 - 用
fetch()校验资源时没设 timeout，弱网下卡住主线程，白屏长达数秒 - 降级跳转用
window.location.href = "https://xxx.com/page"，没做 native 拦截，导致 WebView 退出离线域，后续资源全走网络
稳妥做法是 native 层接管校验：加载前先调 getRawFile("manifest.json")，确认所有 files 字段中的路径都能读取成功，再决定走离线还是 fallback 到网络 URL。
WebView 加载离线 HTML 后跳转链接为何跳出本地域？
点击 <a href="chapter2.html"></a>，WebView 默认发起 file:///chapter2.html 请求，指向 rawfile 根目录，而非当前 HTML 所在子目录（如 pages/）。这不是 HTML 写错了，是导航机制没被干预。
必须注册导航回调并手动解析：
- 调用
webview.setNavigationCallback(...) - 在
onWillNavigate中判断 URL 是否为非 http(s) 协议且不含路径（如纯chapter2.html） - 用
getContext().getResourceManager().getRawFileDir()获取真实 rawfile 路径，拼出完整file://地址 - 调
event.preventDefault()+webView.loadUrl(拼好的路径)
漏掉 event.preventDefault() 就会双路径并发，一个失败一个成功，行为不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
