如何在.NET 8.0 Blazor WebAssembly项目中添加JavaScript文件？

针对你创建的.NET 8 Blazor Web App（选择Blazor WebAssembly渲染器），客户端项目没有index.html的情况，可通过以下几种方式添加自定义JavaScript文件：

方法一：在客户端App.razor中直接引用脚本 #

1. 确保你的自定义JS文件（比如custom.js）已放在客户端项目的wwwroot目录下
2. 打开客户端项目的App.razor文件，添加脚本引用：

   <HeadContent>
       <!-- 放在头部加载，适合需要提前执行的脚本 -->
       <script src="custom.js"></script>
   </HeadContent>
   
   <Routes />
   

   或者如果脚本需要在DOM渲染完成后执行，可放在组件底部：

   <Routes />
   <script src="custom.js"></script>
   

方法二：复用默认的app.js文件 #

客户端项目的wwwroot目录下默认存在app.js文件，该文件已被项目自动引用，你可以直接将自定义JS代码写入这个文件，无需额外添加引用标签。

方法三：在初始化时调用JS方法（适合需要启动执行的逻辑） #

如果你的JS代码需要在Blazor应用启动时执行，可以在客户端项目的Program.cs中通过IJSRuntime调用：

1. 在wwwroot/custom.js中定义初始化函数：

   window.initCustomCode = function() {
       // 你的自定义初始化逻辑
       console.log("自定义JS代码执行");
   }
   

2. 修改客户端Program.cs：

   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   builder.RootComponents.Add<App>("#app");
   
   // 构建服务并获取IJSRuntime实例
   var serviceProvider = builder.Services.BuildServiceProvider();
   var jsRuntime = serviceProvider.GetRequiredService<IJSRuntime>();
   await jsRuntime.InvokeVoidAsync("initCustomCode");
   
   await builder.Build().RunAsync();
   

注意事项 #

• 客户端wwwroot是静态资源根目录，所有放在这里的文件都可以通过相对路径直接访问（比如custom.js的访问路径为/custom.js）
• 若脚本依赖DOM元素，推荐放在<Routes />之后加载，确保DOM已渲染完成

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