Blazor Azure静态Web应用无法加载_content下JavaScript问题排查

可行解决方案 #

1. 配置Azure静态Web应用忽略URL大小写 #

修改项目根目录的staticwebapp.config.json，添加路由重写规则，将小写请求映射到正确大小写的文件：

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "mimeTypes": {
    ".js": "text/javascript"
  },
  "routes": [
    {
      "route": "/_content/Darnton.Blazor.DeviceInterop/js/geolocation.js",
      "rewrite": "/_content/Darnton.Blazor.DeviceInterop/js/Geolocation.js"
    }
  ]
}

如果要全局避免类似大小写问题，可使用通用重写规则：

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "mimeTypes": {
    ".js": "text/javascript"
  },
  "routes": [
    {
      "route": "/*",
      "rewrite": "/{path}",
      "conditions": {
        "requestMethod": "GET",
        "pathMatch": "regex",
        "path": "^/_content/Darnton.Blazor.DeviceInterop/js/(.*)$",
        "lowercase": true
      }
    }
  ]
}

部署更新后的配置文件即可生效。

2. 自定义JS请求拦截（代码层面修正） #

在项目wwwroot/index.html中添加JS代码，拦截动态导入请求并修正文件名大小写：

<script>
    const originalImport = window.import;
    window.import = function(modulePath) {
        if (modulePath.includes('/_content/Darnton.Blazor.DeviceInterop/js/geolocation.js')) {
            modulePath = modulePath.replace('geolocation.js', 'Geolocation.js');
        }
        return originalImport(modulePath);
    };
</script>

这段代码会替换全局import方法，自动修正目标文件的大小写。

3. Fork并修复NuGet包源码 #

若要彻底解决问题，可采取以下步骤：

• Fork目标NuGet包的GitHub仓库
• 检查项目中JS文件的引用路径，确保代码调用的文件名与实际文件大小写完全一致
• 重新编译打包NuGet包，替换项目中原有的包引用

额外提示 #

针对Azure诊断功能失效的情况，可直接在Azure门户的静态Web应用资源中进入存储浏览器，查看部署后的文件结构，确认Geolocation.js的实际路径和大小写是否正确，此方式比依赖诊断功能更直接。

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