MVC4 - 当优化设置为true时,Bundling不起作用

Question

我想知道我在这里做的不正确.我正在使用ASP.NET C#MVC4,我想使用新的css/js优化功能.

这是我的HTML部分

@Styles.Render("~/content/css")

这是我的BunduleConfig.cs一部分

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

// BundleTable.EnableOptimizations = true;

输出(工作):

<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>

但是当我取消注释BundleTable.EnableOptimizations = true;html输出时看起来像这样

<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>

这当然是404.我不知道我做错了什么,请帮助,第一次使用MVC4.

Answer 1

我想问题是你将bundle放在一个实际存在的虚拟URL上,但它是一个目录.

MVC正在从您的包中创建一个虚拟文件,并从您指定的路径作为包路径提供它.

该问题的正确解决方案是使用不直接映射到现有目录的捆绑路径,而是使用该目录内的虚拟文件名(也不映射到实际文件名).

例:

如果您的站点有一个名为/ content/css的文件夹,请按如下方式创建css包:

在BundleConfig.cs中:

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

在页面上:

@Styles.Render("~/content/css/AllMyCss.css")

请注意,这假设您的css文件夹中没有名为AllMyCss.css的文件.

Answer 2

我不确定它是Web优化,还是WebGrease,它是如此挑剔,但它们中的一个(或两个)是你需要非常小心.

首先,您的代码没有任何问题:

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

事实上,这正是微软所做的.他们不使用~/bundlescss的主要原因是相对路径被搞砸了.考虑一下您的浏览器如何看待捆绑包 - 与查看任何其他URL的方式完全相同,并且所有与正常路径相关的规则仍然适用于相对路径.想象一下你的css有一个图像路径../images/bullet.png.如果您使用~/bundles浏览器,则会查找上面bundles实际上不存在的目录.它可能最终会~/images找到你可能拥有它的位置~/content/images.

我发现了一些可以真正破坏它并导致404错误的东西:

• 仅供参考:我的目录结构Content/CSS包含imagesCSS图像的文件夹.
• 我必须EnableOptimizations=true在测试时强制使用bundle
• 你应该做的第一件事是"查看源代码",只需点击css链接,看看它们是否有效

假设我们正在开发一个关于猫的网站.你可能有这个

 @Styles.Render("~/Content/css/cats.css")    // dont do this - see below why

 bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

这会在HTML中生成指向此路径的CSS链接:

/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1

但是这会产生404,因为我放了一个扩展名.css和IIS(我认为)混淆了.

如果我将其更改为此,那么它可以正常工作:

 @Styles.Render("~/Content/css/cats")

 bundles.Add(new StyleBundle("~/content/css/cats").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

别人已经指出的另一个问题是你不能这样做

 @Styles.Render("~/Content/css")

如果你的目录中有一个css目录或文件(不太可能你有一个css没有扩展名的文件)Content.

另一个技巧是您需要确保生成的HTML具有版本号

<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>

如果它不是,看起来像这样,那么你可能没有与Bundle表和cshtml文件之间的bundle名称完全匹配.

<link href="/Content/css/cats" rel="stylesheet"/>