求助：如何在Maui Blazor Hybrid App中正确使用JavaScript及app.js文件

我正在开发一个MAUI Blazor Hybrid应用，想了解如何正确使用app.js文件。尝试通过IJSRuntime和IJSObjectReference实现，但始终无法正常运行。

项目结构说明 #

app.js文件位于项目的wwwroot/js目录下。

当前代码 #

@inherits LayoutComponentBase
@using Microsoft.JSInterop

<div class="page">
    <main>
        <article class="content px-4" style="padding: 0 !important">
            @Body
        </article>
    </main>
</div>
@code {
    [Inject] IJSRuntime JSRuntime { get; set; }
    IJSObjectReference module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
        }
        catch (Exception ex)
        {
            Console.Write(ex.Message);
            throw;
        }
    }
}

解决步骤与优化方案 #

1. 检查文件属性 #

右键wwwroot/js/app.js文件，设置：

• 生成操作：内容
• 复制到输出目录：如果较新则复制
  确保文件能被正确打包到应用中。

2. 修正模块导入路径 #

Blazor中JS模块的导入路径基于wwwroot根目录，使用绝对路径更可靠，避免相对路径因组件位置变化导致的问题：

module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/app.js");

3. 限制首次渲染加载模块 #

添加firstRender判断，避免每次组件渲染都重复加载模块：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        try
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/app.js");
            // 调用app.js中的导出方法，比如init
            // await module.InvokeVoidAsync("init");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"JS模块加载失败：{ex.Message}");
        }
    }
    await base.OnAfterRenderAsync(firstRender);
}

4. 规范app.js的ES模块写法 #

app.js需要符合ES模块规范，通过export暴露方法：

// wwwroot/js/app.js
export function init() {
    console.log("app.js模块加载成功");
    // 编写你的业务逻辑
}

5. 添加模块销毁逻辑 #

实现IAsyncDisposable接口，避免内存泄漏：

public async ValueTask DisposeAsync()
{
    if (module != null)
    {
        await module.DisposeAsync();
    }
}

6. 排查错误 #

打开开发者工具（Windows/Mac按Ctrl+Shift+I），查看控制台的错误信息：

• 如果提示404：检查路径是否正确，文件是否存在
• 如果提示语法错误：检查app.js的代码是否符合ES规范

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