WebView2加载本地HTML时如何解析相对路径？

问题原因 #

旧Windows WebBrowser控件会把本地HTML所在的盘符当作根路径解析/开头的相对路径，但WebView2严格遵循标准URL规则：当你用Navigate("C:\temp\some.html")时，实际加载的是file:///C:/temp/some.html，根相对路径/service/css/...会被解析成file:///service/css/...（指向系统根目录下的service文件夹），自然找不到你的本地文件。

解决方法 #

方法1：用虚拟域名映射本地文件夹（推荐）

WebView2提供了SetVirtualHostNameToFolderMapping方法，能把一个虚拟域名绑定到本地文件夹，让根相对路径和线上环境逻辑一致，不用修改HTML内容。

以C#为例，初始化WebView2后添加以下代码：

await webView2.EnsureCoreWebView2Async();
// 把虚拟域名映射到你的本地项目根目录（比如C:\temp）
webView2.CoreWebView2.SetVirtualHostNameToFolderMapping(
    "local.myapp.com",
    @"C:\temp",
    CoreWebView2HostResourceAccessKind.Allow
);
// 用虚拟域名的HTTPS URL导航，不要直接用本地路径
webView2.CoreWebView2.Navigate("https://local.myapp.com/some.html");

这样HTML里的/service/css/rendering/rendering.css会被解析成https://local.myapp.com/service/css/rendering/rendering.css，自动对应到本地C:\temp\service\css\rendering\rendering.css，脚本的根相对路径也能正常加载。

方法2：修正标签的用法

如果不想改代码，也可以调整HTML里的<base>标签，确保路径指向本地项目的根目录，且格式正确：

<!-- 注意是file:///三个斜杠，末尾要加斜杠 -->
<base href="file:///C:/temp/">

这样所有根相对路径都会基于这个base路径解析，脚本的/service/js/xxx.js会变成file:///C:/temp/service/js/xxx.js，就能正确加载。之前脚本加载失败大概率是base路径没写对（比如少了斜杠或者路径写错）。

两种方法对比 #

• 虚拟域名映射：完全模拟线上环境的路径逻辑，避免file协议的一些兼容性问题，适合需要保持HTML代码和线上一致的场景。
• 标签：操作简单，但需要修改HTML文件，若多个HTML文件都要改会比较麻烦。

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