MAUI Blazor中.mjs文件MIME类型错误导致加载失败的解决办法咨询

问题根源是MAUI Blazor默认没有为.mjs文件配置正确的MIME类型，导致浏览器将其识别为application/octet-stream，不符合ES模块的加载要求。以下是具体解决步骤：

1. 配置MIME类型映射 #

在项目的Program.cs中，添加对.mjs文件的MIME类型映射，将其指定为text/javascript（ES模块的标准MIME类型）：

如果是通过Blazor WebView配置：

builder.Services.AddBlazorWebView(options =>
{
    options.HostPage = "wwwroot/index.html";
    // 配置静态文件提供者并添加.mjs的MIME映射
    var staticFileProvider = new StaticFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"));
    staticFileProvider.ContentTypeProvider.Mappings[".mjs"] = "text/javascript";
    options.StaticFileProvider = staticFileProvider;
});

或者通过UseStaticFiles配置（适用于通用静态文件场景）：

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = new FileExtensionContentTypeProvider
    {
        Mappings = { [".mjs"] = "text/javascript" }
    }
});

2. 确认PDF.js文件结构 #

确保PDF.js的预构建文件完整放置在wwwroot目录下，比如：

• wwwroot/pdfjs/build/pdf.mjs
• wwwroot/pdfjs/web/viewer.mjs
• 同时保留官方包中的其他依赖文件（如viewer.css、资源图片等），避免路径引用错误。

3. 保留官方推荐的script标签写法 #

不要修改.mjs扩展名，继续使用模块类型引入：

<script src="pdfjs/build/pdf.mjs" type="module"></script>
<script src="pdfjs/web/viewer.mjs" type="module"></script>

关键说明 #

修改.mjs为.js会导致PDF.js内部的模块导入路径失效（viewer.mjs中会通过相对路径导入其他.mjs模块），这就是改扩展名后深层功能无法正常工作的原因。通过配置正确的MIME类型，既能符合ES模块的加载规范，又能保留官方文件的原始结构和依赖关系。

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