JavaScript - Blazor サーバー アプリがサブプロジェクトの静的コンテンツにアクセスできない

okwaves2024-01-25  7

私が作成しました

Blazor サーバー アプリ (BlazorServerApp)(.Net Core 3.1) .NET 標準クラス ライブラリ (MyClassLibrary)

MyClassLibrary プロジェクトを BlazorServerApp の依存関係に追加しました。次に、wwwroot フォルダーを MyClassLibrary プロジェクトに追加し、test.js ファイルをこのフォルダーに追加しました。

MyClassLibrary プロジェクト ファイルを次のように編集しました。

<Project Sdk="Microsoft.NET.Sdk">    
  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
    <AssemblyName>MyClassLibrary</AssemblyName>
    <RootNamespace>MyClassLibrary</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="wwwroot\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
  </ItemGroup>    
</Project>

Blazor Web アプリは、スタートアップで UseStaticFiles メソッドを呼び出します。これにより、静的ファイルの提供が可能になります。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

test.js を <script src="_content/MyClassLibrary/test.js"></script> として追加しました。 _Host.cshtml (BlazorServerApp プロジェクト):

@page "/"
@namespace BlazorServerApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorServerApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/MyClassLibrary/test.js"></script>
</body>
</html>

ただし、BlazorServerApp プロジェクトを実行すると、ブラウザーにエラーが表示されます。

GET https://localhost:5001/_content/MyClassLibrary/test.js net::ERR_ABORTED 404

つまり、Web アプリは、指定されたパスでそのようなリソースを見つけられません。

なぜこれが起こっているのか、またアプリケーションが他の依存プロジェクト (私の場合はネット標準クラス ライブラリ) の静的リソース (js や css など) にアクセスするには何をする必要があるのか​​説明できる人はいますか?



------------------------

コンポーネント プロジェクトのプロパティを開き、パッケージ タブに移動します。

パッケージ ID に値を設定する必要があります

次に、この ID を使用してパスを指定します。

<script src="_content/package_id/test.js"></script>

1

ご回答ありがとうございます。パッケージ ID を追加しようとしましたが、うまくいきませんでした。結果は同じです。

– aaperfilev

2020 年 9 月 4 日 1:51



------------------------

これは約 2 年前のことですが、これに対する答えを見つけました。

開発段階でアプリを実行している場合は、静的 Web アセットが問題なく見つかっている可能性があります。ただし、ASPNETCORE_ENVIRONMENT を他の値に変更すると、アセットを取得しようとすると大量の 404 エラーが発生することがわかります。

これを回避するには、StaticWebAssets を追加しますLoader.UseStaticWebAssets(builder.Environment,builder.Configuration);メインの Main メソッド、または .net 6 の Program.cs にコピーします。

この情報は、aspnetcore github で見つけました。ここでは静的アセット ローダーについて詳しく説明されており、私はそこでその使用方法を見つけましたが、38212 の問題は無関係のようです。ただし、静的アセット ローダーがどのように機能するか、またなぜ静的アセット ローダーが必要なのかについては詳しく説明しませんでした。

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。