Blazor WebAssembly项目BECanvas组件部署至Azure后运行报错如何解决？

该错误本质是BECanvas依赖的JS静态资源在Azure发布后没有被正确加载到浏览器运行环境，本地调试时静态资源路由正常，发布后受Blazor WASM静态资源托管规则、Azure服务路由配置、发布裁剪逻辑影响导致资源缺失，可按以下步骤逐一排查修复：

1. 检查JS资源引用配置 #

• 确认wwwroot/index.html中已正确引入BECanvas的官方JS路径，不要使用手动拷贝到项目的JS文件，依赖的NuGet包会自动管理_content路径下的静态资源：

  <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
  

• 不要省略路径前缀_content/，发布后该路径为第三方包静态资源的标准托管路径。

2. 排除发布时的资源裁剪问题 #

Blazor WASM发布Release版本时默认开启未使用资源裁剪，可能会将第三方包的静态资源、JS互操作方法判定为未使用而剔除，需要在项目.csproj文件中添加保留配置：

• 保留BECanvas的所有静态资源：

  <PropertyGroup>
    <BlazorWasmAdditionalPublishStaticWebAssets>_content/Blazor.Extensions.Canvas/**</BlazorWasmAdditionalPublishStaticWebAssets>
  </PropertyGroup>
  

• .NET 7及以上版本额外添加IL裁剪豁免规则，避免JS互操作入口被裁剪：

  <ItemGroup>
    <TrimmerRootAssembly Include="Blazor.Extensions.Canvas" />
  </ItemGroup>
  

3. 修复Azure服务的静态资源路由配置 #

部署到Azure应用服务场景 #

Azure应用服务默认可能缺少对应静态资源的MIME配置，导致JS资源加载返回404，需要在wwwroot目录下添加web.config补充配置：

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

部署到Azure静态Web应用场景 #

需要在仓库根目录添加staticwebapp.config.json配置，开放_content路径的匿名访问权限：

{
  "routes": [
    {
      "route": "/_content/*",
      "allowedRoles": ["anonymous"]
    }
  ]
}

4. 本地预发布验证 #

部署到Azure前先本地执行Release发布命令，验证资源是否正常输出：

dotnet publish -c Release

检查发布输出的wwwroot/_content/Blazor.Extensions.Canvas/目录下是否存在blazor.extensions.canvas.js文件，确认存在后再部署到Azure，排除本地发布环节的问题。

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