为啥捆绑包在我的 asp.net mvc 项目中不起作用？

Posted 2023-05-08

【中文标题】为啥捆绑包在我的 asp.net mvc 项目中不起作用？

【英文标题】：Why doesn't the bundle work in my asp.net mvc project?为什么捆绑包在我的 asp.net mvc 项目中不起作用？

【发布时间】：2018-11-29 14:56:04

【问题描述】：

我创建了一个 js 文件包（“bundles/js”），其中包含了页面所需的所有 js 文件。

  @Scripts.Render("/bundles/js")

在渲染后它会为上面的行抛出错误：

加载资源失败：服务器响应状态为 404（未找到）

渲染后它看起来像

<script scr="/bundles/js">

但页面上没有任何效果。

我已经注释了对所有js文件的引用并放置了渲染，但它不起作用。

我在项目、web.config 中包含优化 dll，还添加了 bundlesConfig 类

public static void RegisterBundles(BundleCollection bundles)
        
            bundles.Add(new ScriptBundle("~/bundles/js").Include("~/Content/js/jquery.min.js", 
                                                                 "~/Content/js/bootstrap.min.js",
                                                                 "~/Content/js/owl.carousel.js",
                                                                 "~/Content/js/jquery.ajaxchimp.js",
                                                                 "~/Content/js/smooth-scroll.js",
                                                                 "~/Content/js/jquery.magnific-popup.min.js",
                                                                 "~/Content/js/waypoints.min.js",
                                                                 "~/Content/js/jquery.counterup.js",
                                                                 "~/Content/js/menumaker.js",
                                                                 "~/Content/js/jquery.appear.js",
                                                                 "~/Content/js/jquery.countdown.js",
                                                                 "~/Content/js/price-slider.js",
                                                                 "~/Content/js/bootstrap-datepicker.js",
                                                                 "~/Content/js/jquery.elevatezoom.js",
                                                                 "~/Content/js/theme.js",
                                                                 "~/Scripts/jquery.validate.min.js",
                                                                 "~/Scripts/jquery.validate.unobtrusive.min.js",
                                                                 "~/Scripts/DataTables/jquery.dataTables.min.js",
                                                                 "~/Content/sweetalert/sweetalert.min.js",
                                                                 "~/Scripts/DataTables/dataTables.buttons.min.js",
                                                                 "~/Scripts/DataTables/buttons.flash.min.js",
                                                                 "~/Scripts/DataTables/pdfmake.min.js",
                                                                 "~/Scripts/DataTables/vfs_fonts.js",
                                                                 "~/Scripts/DataTables/buttons.html5.min.js",
                                                                 "~/Scripts/DataTables/buttons.print.min.js",
                                                                 "~/Content/js/blockUI.js"));
        
    

然后在application_start中注册

 protected void Application_Start()
        
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);

        

之前的文件序列是：

<script src="~/Content/js/bootstrap.min.js"></script>
    <script src="~/Content/js/owl.carousel.js"></script>
    <script src="~/Content/js/jquery.ajaxchimp.js"></script>
    <script src="~/Content/js/smooth-scroll.js"></script>
    <script src="~/Content/js/jquery.magnific-popup.min.js"></script>
    <script src="~/Content/js/waypoints.min.js"></script>
    <script src="~/Content/js/jquery.counterup.js"></script>
    <script src="~/Content/js/menumaker.js"></script>
    <script src="~/Content/js/jquery.appear.js"></script>
    <script src="~/Content/js/jquery.countdown.js"></script>
    <script src="~/Content/js/price-slider.js"></script>
    <script src="~/Content/js/bootstrap-datepicker.js"></script>
    <script src="~/Content/js/jquery.elevatezoom.js"></script>
    <script src="~/Content/js/theme.js"></script>
    <script src='@Url.Content("~/Scripts/jquery.validate.min.js")' type='text/javascript'></script>
    <script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")' type='text/javascript'></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Content/sweetalert/sweetalert.min.js"></script>
    <script src="~/Scripts/DataTables/dataTables.buttons.min.js"></script>
    <script src="~/Scripts/DataTables/buttons.flash.min.js"></script>
    <script src="~/Scripts/DataTables/pdfmake.min.js"></script>
    <script src="~/Scripts/DataTables/vfs_fonts.js"></script>
    <script src="~/Scripts/DataTables/buttons.html5.min.js"></script>
    <script src="~/Scripts/DataTables/buttons.print.min.js"></script>
    <script src="~/Content/js/blockUI.js"></script>

【问题讨论】：

你设置BundleTable.EnableOptimizations = true;了吗？

我还没有

我做了，但它不起作用，在js中它在渲染时抛出错误加载资源失败：服务器响应状态为404（未找到）

如果你有~，有什么不同吗？ @Scripts.Render("~/bundles/scripts")

【参考方案1】：

//Add into web config
<system.web>
 <compilation debug="false" />
</system.web> 

public static void RegisterBundles(BundleCollection bundles)          
   
  //Enable bundling
  BundleTable.EnableOptimizations = true;

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案2】：

@Scripts.Render("/bundles/js") 中缺少一个波浪号

试试 - @Scripts.Render("~/bundles/js")