Blazor中能否将.js与.cs文件搭配放置？加载失败求助

根据Blazor的常规做法，我们可以将.js文件与.razor组件文件放在同一目录下。那能不能用类似方式，把.js文件和.cs服务文件（比如MyService.cs）搭配放置呢？我尝试了如下结构：

代码结构 #

MyService.cs #

public class MyService
{
    private readonly IJSRuntime _js;

    private IJSObjectReference? _jsModule;

    public MyService(IJSRuntime js)
    {
        _js = js;
    }

    public async Task MyMethod()
    {
        if (_jsModule == null)
        {
            var modulePath = $"./_content/Company.Library/Service/MyService.cs.js";
            _jsModule = await _js.InvokeAsync<IJSObjectReference>("import", modulePath);
        }

        await _jsModule.InvokeVoidAsync("myjsmethod");
    }
}

MyService.cs.js #

export function myjsmethod() {
    console.log('Hello World');
}

报错情况 #

编译过程正常，但运行时加载MyService.cs.js文件失败，报错：

failed to fetch dynamically imported module

解决方案 #

1. 确保JS文件被正确发布 #

.cs.js这类命名的文件默认不会被识别为静态资源，因此需要手动配置让它被复制到输出/发布目录：

• 在Visual Studio中右键该JS文件，选择「属性」，将「复制到输出目录」设置为「如果较新则复制」；
• 或者直接修改项目文件（.csproj），添加如下配置：

<ItemGroup>
  <Content Include="Service/MyService.cs.js">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
  </Content>
</ItemGroup>

2. 核对模块路径正确性 #

确认路径中的文件名与实际发布的文件名完全一致，包括后缀。如果觉得.cs.js的命名容易混淆，也可以直接将JS文件命名为MyService.js，和MyService.cs放在同一目录，同时修改代码中的路径：

var modulePath = $"./_content/Company.Library/Service/MyService.js";

3. 推荐的规范做法 #

更稳妥的方式是将JS文件放在类库的wwwroot目录下（比如wwwroot/js/MyService.js），Blazor类库默认会将wwwroot下的文件作为静态资源发布。此时模块路径修改为：

var modulePath = $"./_content/Company.Library/js/MyService.js";

这种方式符合Blazor类库的资源组织规范，能避免文件被遗漏发布的问题。

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