Blazor客户端index.html加载JS脚本失效及函数调用报错排查

• 入口文件修改无效的核心原因：.NET 8及以上版本的Blazor Web App模板，默认根页面并非项目根目录下的index.html。这类模板默认采用Razor Page承载交互渲染逻辑，实际渲染的入口文件是Pages/_Host.cshtml，根目录下的index.html在该类模板中甚至不会被纳入发布产物，手动添加的script标签自然不会出现在最终页面源码中。
• 方法未定义的额外原因：JS代码使用export function的ES模块导出语法时，普通script标签引入的模块不会将导出的方法挂载到全局window作用域，而Blazor的IJSRuntime默认只能调用全局作用域下的方法，即使script加载成功也会报找不到方法的错误。

• 定位对应项目模板的入口文件
  • 对.NET 7及更早版本的独立Blazor WASM项目，直接修改根目录下的index.html即可
  • 对.NET 8+的Blazor Web App项目，将script标签添加到Pages/_Host.cshtml文件的</body>闭合标签之前的位置，不要放在head区域避免阻塞渲染
• 修正JS方法的全局注册逻辑
  按需选择两种兼容方案：
  • 保留传统JS写法：移除JS文件中的export关键字，可显式将方法挂载到window对象，确保全局可访问：

    function testAlert() {
      alert('Testing Blazor');
    }
    window.testAlert = testAlert;
    

  • 保留ES模块写法：引入script时添加type="module"属性，后续通过模块导入的方式调用方法，不直接调用全局作用域的testAlert
• 优化组件内的JS调用逻辑
  增加firstRender判断避免组件重渲染时重复触发JS调用：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {
      await JS.InvokeVoidAsync("testAlert");
    }
  }
  

• 确认静态资源路径有效性
  将自定义JS文件放置在wwwroot/scripts/目录下，确保构建过程中文件会被正确打包到静态资源输出路径，避免404导致的JS加载失败。

补充提示：如果是采用交互式Web App模式的Blazor项目，也可以选择将JS逻辑的引入写在根组件的OnAfterRenderAsync中通过动态导入JS模块的方式实现，无需硬编码到入口页面中。

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