研究新的.NET8 Blazor Web 应用程序。如何将 .js 添加到 .razor 页面？

Question

应该很简单，但是我实在找不到将.js添加到项目中的方法。 我使用如下简单代码创建了一个 .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()
    {
        text = await module.InvokeAsync<string>("logToConsole");
    }
}

以及一个带有我放入的函数的 .js 文件，在名为 js 的 wwwroot 目录中创建：

export function logToConsole() {
    return "My text"
}

它不是附加文本，而是抛出错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to resolve module specifier '.js/index.js'
      TypeError: Failed to resolve module specifier '.js/index.js'
          ...

尝试改变路径，尝试各种渲染模式，但没有帮助。

Answer 1

我注意到您正在使用

InteractiveAuto

，所以我推断您正在使用 blazor Web 应用程序并选择自动模板，否则我们应该会出现以下错误。

我在我身边进行了测试，但没有用您的代码重现您的问题。而且我认为如果将它放在

./js/index.js

文件夹中，也应该是正确的。因为

本节

提到了

当应用程序发布时，框架会自动移动 脚本到网络根目录。脚本被移动到 bin/Release/{TARGET 框架名字}/publish/wwwroot/{PATH}/Pages/{COMPONENT}.razor.js

所以我认为问题可能是由浏览器缓存引起的，建议清除缓存然后进行测试。感谢 OP 确认这确实有效。