c#-MVC4-优化设置为tru时捆绑不起作用

我想知道我在这里没有做正确的事情。 我正在使用ASP.NET C#MVC4,并且想使用新的CSS / JS优化功能。

这是我的HTML部分

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

这是我的BundleTable.EnableOptimizations = true;的一部分

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。

6个解决方案
70 votes

我想问题是您将捆绑软件放在实际存在的虚拟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的文件。

dodexahedron answered 2020-08-01T12:50:59Z
26 votes

我不确定是Web优化还是WebGrease如此挑剔,但是其中之一(或两者兼而有之),您需要非常小心。

首先,您的代码没有错:

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

实际上,这正是Microsoft所做的。 他们不为CSS使用css的主要原因是相对路径弄乱了图像。 想一想您的浏览器如何看到一个包-与看到任何其他URL完全一样,并且所有与常规路径相关的规则仍然适用于相对路径。 想象一下,您的CSS的映像路径为299219255999437311。如果使用的是~/bundles,则浏览器将在bundles上方的目录中查找该目录,该目录实际上并不存在。 它可能最终会出现在~/images中,而您可能会在~/content/images中找到它。

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

  • 仅供参考:我的目录结构是css,其中包含用于CSS图像的Content文件夹。
  • 我有css可以在测试时强制使用捆绑软件
  • 您应该做的第一件事是“查看源代码”,然后单击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")

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

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

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

如果没有,并且看起来像这样,则您的Bundle表和cshtml文件中的bundle名称可能不完全匹配。

<link href="/Content/css/cats" rel="stylesheet"/>
Simon_Weaver answered 2020-08-01T12:52:23Z
4 votes

不要忘了确保捆绑的HttpModule在那里。

<modules>  
  <remove name="BundleModule" />  
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />  
</modules>

这让我很头疼。 不知道NuGet程序包是否应该添加必要的配置,但是在我看来并不是这样。

Andy McCluggage answered 2020-08-01T12:52:48Z
3 votes

在我看来,这是正确的。 启用优化后,您将只有一个引用,并且将使用您在StyleBundle(/ content / css)中指定的名称。 在调试模式下(或更具体地说,在Web配置中使用debug = false),您将像平常一样获得未优化的文件。 如果您看的话,您会看到它们只是您键入时的纯文本。 但是,启用优化功能后(通常在发布模式下运行),您会得到一个看起来更加古怪的URL。

如果您看一下它的输出,它将被缩小。 查询字符串?v = 5KLoJ ....是基于捆绑中文件的哈希值。 这样一来,只要您愿意,就可以安全地对引用进行HTTP高速缓存。 如果您愿意,可以永远,但我认为默认值为一年。 但是,如果您修改任何样式表,它将生成一个新的哈希,并且该哈希是“缓存无效的”,因此您将在浏览器上获得一个全新的副本。

说了这么多,我不确定为什么要得到404。我怀疑这与您的路由配置或IIS设置有关。 您是否正在使用IISExpress在Visual Studio中运行?

cirrus answered 2020-08-01T12:53:18Z
3 votes

我刚刚解决了类似的问题。 问题如下,我通过bundles.Add()安装了“ chosen”。在BundleConfig类中,包含CSS文件的行如下所示:

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",)); 
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/chosen.css"));

在该班级的某些地方,我有这条线:

BundleTable.EnableOptimizations = true;

解决方法是像这样结合2个bundles.Add()

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/site.css", 
                            "~/Content/chosen.css"
                        ));

这为我解决了。

Yustme answered 2020-08-01T12:53:52Z
0 votes

也可能是由于某种原因您尚未将bundleconfig.json部署到服务器。

DJA answered 2020-08-01T12:54:12Z
translate from https://stackoverflow.com:/questions/12240097/mvc4-bundling-does-not-work-when-optimizations-are-set-to-true