ASP.NET升级Bootstrap至5.3.1后出现bootstrap.js 404错误求助

针对你将Bootstrap从3.4.1升级到5.3.1后出现的bootstrap.js 404问题，以下是具体的排查和解决步骤：

• 修复BundleConfig的语法问题
  你提供的BundleConfig代码缺少了标准的RegisterBundles方法定义，这会导致ASP.NET无法正确识别并加载bundle配置。正确的代码结构应该是：

  public class BundleConfig
  {
      public static void RegisterBundles(BundleCollection bundles)
      {
          bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
              "~/Scripts/jquery-{version}.js"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
              "~/Scripts/jquery.unobtrusive*",
              "~/Scripts/jquery.validate*"));
  
          bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js"));
  
          bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
      }
  }
  

  同时确认Global.asax文件中已经调用了BundleConfig.RegisterBundles(BundleTable.Bundles);，确保bundle配置被正确加载。

• 核对Bootstrap 5的JS文件路径
  Bootstrap 5通过NuGet安装后，默认提供的完整JS文件是bootstrap.bundle.js（包含Popper.js依赖，Bootstrap 5必须依赖Popper），而单独的bootstrap.js可能不包含必要的依赖。检查你的Scripts文件夹：

  • 如果存在bootstrap.bundle.js，修改BundleConfig中的引用为：

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        "~/Scripts/bootstrap.bundle.js"));
    

  • 若确实只有bootstrap.js，确认文件的版本为5.3.1，避免是旧版本的残留文件导致路径不匹配。

• 检查JS文件的部署属性
  右键Scripts文件夹中的bootstrap.js，选择「属性」：

  • 将「复制到输出目录」设置为如果较新则复制或始终复制，确保文件在编译部署时被正确复制到服务器的对应目录中。

• 清理浏览器缓存并强制刷新
  按Ctrl+F5强制刷新页面，清除Chrome的本地缓存；同时在开发者工具的「网络」面板中勾选「禁用缓存」，重新加载页面查看请求的详细信息，确认请求的路径是否正确。

• 调整Bundle的调试模式
  在Web.config中检查编译模式配置：

  <system.web>
      <compilation debug="true" targetFramework="你的.NET版本" />
  </system.web>
  

  当debug="true"时，ASP.NET会加载单个JS文件而非合并后的bundle，此时可以直接查看~/Scripts/bootstrap.js的实际访问路径是否正确；若debug="false"，可以临时改为true来排查单个文件的加载问题，之后再改回。

• 排查页面中的其他硬编码引用
  检查_Layout.cshtml或其他页面中是否存在直接引用bootstrap.js的硬编码<script>标签，这些标签可能指向了错误的路径，导致出现404错误。

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