探究.NET8 Blazor Web App：如何在Razor页面引入.js文件？

核心问题：路径解析错误 #

你遇到的报错是因为相对路径 ./js/index.js 会基于当前组件的路由路径（/text）解析为 /text/js/index.js，但你的 JS 文件实际存放在网站根目录的 wwwroot/js/index.js，两者路径不匹配导致模块无法找到。

修复步骤 #

1. 修正 JS 模块导入路径 #

将 OnAfterRenderAsync 中的导入路径改为根目录绝对路径，直接指向 wwwroot 下的 JS 文件：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        module = await JsRuntime.InvokeAsync<IJSObjectReference>(
            "import", "/js/index.js"); // 使用根目录绝对路径
    }
}

2. 补充异步释放逻辑 #

你已实现 IAsyncDisposable 接口，但缺少 JS 模块的释放代码，添加以下内容到 @code 块中，避免内存泄漏：

async ValueTask IAsyncDisposable.DisposeAsync()
{
    if (module is not null)
    {
        await module.DisposeAsync();
    }
}

3. 增加空引用判断（可选但推荐） #

在调用 JS 方法前判断模块是否已成功加载，避免空引用异常：

private async Task LoadText()
{
    if (module is not null)
    {
        text = await module.InvokeAsync<string>("logToConsole");
        StateHasChanged(); // 确保UI同步更新
    }
}

完整修正后的 Razor 代码 #

@page "/text"
@rendermode InteractiveAuto
@inject IJSRuntime JsRuntime 
@implements IAsyncDisposable 


<h2>Test  @text</h2>
<button @onclick="LoadText">Load</button>

@code
{
    string text = "";
    private IJSObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JsRuntime.InvokeAsync<IJSObjectReference>(
                "import", "/js/index.js");
        }
    }

    private async Task LoadText()
    {
        if (module is not null)
        {
            text = await module.InvokeAsync<string>("logToConsole");
            StateHasChanged();
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

额外注意事项 #

• 确保 wwwroot/js/index.js 文件存在且代码无误（你的现有 JS 代码是正确的）
• 所有指向 wwwroot 资源的路径，统一使用以 / 开头的绝对路径，避免相对路径的解析歧义
• InteractiveAuto 模式下，服务器端首次渲染不会执行 JS 调用，客户端接管后才会加载模块，无需额外适配

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