Blazor项目Razor页面是否需要引入调用JavaScript隔离脚本？

Blazor内置的CSS隔离会自动完成关联样式文件的扫描、打包、版本控制与页面注入，这套自动化流程完全不适用于普通JavaScript文件——你写的razor.js无法运行，本质是文件没有被正确暴露、加载到浏览器运行时，和之前CSS隔离正常工作的状态没有冲突。

正确接入流程 #

1. 调整脚本文件存放位置 #

Blazor只会对外暴露wwwroot目录下的静态资源：

• 如果你此前把razor.js和.razor页面文件放在Pages、Shared这类源码目录下，必须先将razor.js移动到wwwroot的对应子目录（例如wwwroot/js/razor.js），否则浏览器请求该文件会直接返回404，这是最高发的踩坑点。

2. 按使用场景选择引入方式 #

全局通用脚本

直接在宿主页面添加静态引用即可，不需要额外逻辑：

• Blazor WebAssembly：在App.razor的HTML区域末尾添加<script src="js/razor.js"></script>
• Blazor Server：在Pages/_Host.cshtml的HTML区域末尾添加上述脚本引用
• 加载完成后，应用内所有Razor组件都可以通过IJSRuntime直接调用razor.js里暴露的全局方法。

单页面专用脚本

不需要全局加载的场景下，可直接在对应Razor组件内动态导入，不影响其他页面：

1. 组件顶部注入JS运行时服务：@inject IJSRuntime JS
2. 在首次渲染完成的生命周期内加载脚本：

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender)
       {
           // 路径匹配wwwroot下的文件相对位置
           await JS.InvokeVoidAsync("import", "./js/razor.js");
       }
   }
   

常见无效场景排查 #

• 静态路径大小写问题：Linux生产环境下静态资源路径严格区分大小写，路径拼写偏差会直接触发404。
• 方法未暴露到全局作用域：如果razor.js内的方法是模块作用域定义的，没有通过window.自定义方法名 = 对应函数引用的方式挂载到全局，就算脚本加载成功也会报方法不存在的错误。
• 不要套用CSS隔离的逻辑等待自动加载：Blazor没有内置JS文件的自动扫描、打包、注入机制，不存在像CSS隔离那样不需要手动引入的默认流程。

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