.NET MAUI WebView无法加载Resources中CSS/JS文件的解决方法咨询

核心原因 #

.NET MAUI的WebView访问应用包内的资源时，必须使用ms-appx-web:///协议来指定路径，直接用普通相对路径无法正确定位到Resources文件夹下的资源文件。

解决方案 #

方案1：修改HTML中的资源引用路径

直接在HTML文件里使用ms-appx-web:///协议指定完整资源路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fire Code Requirements</title>
    <link rel="stylesheet" href="ms-appx-web:///Resources/FirecodeRequirements/styles.css">
</head>
<body>
    <div class="table_component page active">
        <table>
            <tr><th>Page 1</th></tr>
            <tr><td>Content for page 1</td></tr>
        </table>
        <div class="navigation-btns">
            <button class="prevBtn" disabled>Previous</button>
            <button class="nextBtn">Next</button>
        </div>
    </div>
    <script src="ms-appx-web:///Resources/FirecodeRequirements/script.js"></script>
</body>
</html>

MAUI加载代码无需修改，保持原有写法：

var webView = new WebView
{
    Source = "Resources/FirecodeRequirements/index.html"
};

方案2：设置WebView的BaseUrl（更优雅的相对路径写法）

1. 先读取HTML文件的内容：

var htmlContent = string.Empty;
using (var stream = await FileSystem.OpenAppPackageFileAsync("Resources/FirecodeRequirements/index.html"))
using (var reader = new StreamReader(stream))
{
    htmlContent = reader.ReadToEnd();
}

2. 创建HtmlWebViewSource并指定BaseUrl，同时修改HTML中的引用为相对路径：

var webView = new WebView
{
    Source = new HtmlWebViewSource
    {
        Html = htmlContent,
        BaseUrl = "ms-appx-web:///Resources/FirecodeRequirements/"
    }
};

对应的HTML修改：

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

额外检查项

• 确保所有资源文件（HTML/CSS/JS）的Build Action已设置为MauiAsset
• 确认资源文件的Copy to Output Directory设置为Copy if newer（右键文件→属性中查看）
• 清理并重建项目，避免缓存干扰

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