Xamarin中Razor cshtml页面无法加载脚本与CSS的问题排查

你这是踩了Android WebView加载本地资源的常见坑——BaseURL指向的路径和资源实际存放的位置不匹配，下面给你拆解原因和具体解决办法：

核心原因 #

你把phonon.css和phonon.js放在了Android的Assets文件夹里，但调用LoadDataWithBaseURL时用的baseURL是/data/data/{包名}/files/这个应用私有文件目录。WebView会基于这个baseURL去解析页面里的相对路径引用，所以它会去file:///data/data/xxx/files/phonon.css找文件，而你的资源实际在file:///android_asset/phonon.css，自然找不到。

推荐解决办法：调整BaseURL到Assets目录 #

这是最简单直接的方案，只需要修改baseURL参数，让WebView直接从Assets目录加载资源：

1. 修改C#加载代码里的baseURL：

   var url = "file:///android_asset/";
   webView.LoadDataWithBaseURL(url, html, "text/html", "UTF-8", null);
   

2. 确保Assets里的资源文件配置正确：
   在Visual Studio里右键点击phonon.css和phonon.js，选择「属性」，把生成操作设置为AndroidAsset——这一步很关键，否则打包时这些文件不会被放到Assets目录里。

这样页面里的<link rel="stylesheet" href="phonon.css" />和<script src="phonon.js"></script>就能正确指向Assets里的文件了。

备选方案：复制Assets资源到Files目录（如果必须用Files目录） #

如果你因为业务需求必须用/data/data/{包名}/files/作为baseURL，那需要先把Assets里的资源复制到这个目录，再让WebView加载：

var datapath = String.Format("/data/data/{0}/files/", Application.Context.PackageName);
var url = "file://" + datapath;

// 复制phonon.css到files目录
using (var assetStream = Application.Context.Assets.Open("phonon.css"))
using (var fileStream = new FileStream(Path.Combine(datapath, "phonon.css"), FileMode.Create))
{
    assetStream.CopyTo(fileStream);
}

// 复制phonon.js到files目录
using (var assetStream = Application.Context.Assets.Open("phonon.js"))
using (var fileStream = new FileStream(Path.Combine(datapath, "phonon.js"), FileMode.Create))
{
    assetStream.CopyTo(fileStream);
}

// 加载页面
webView.LoadDataWithBaseURL(url, html, "text/html", "UTF-8", null);

额外检查项 #

• 注意Android文件系统是区分大小写的，确保页面里的文件名拼写和Assets里的完全一致（比如不要把phonon.css写成Phonon.css）。
• 如果phonon.js需要执行，记得开启WebView的JavaScript支持：

  webView.Settings.JavaScriptEnabled = true;
  

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