44

我想知道我在这里做的不对。我正在使用 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。

4

6 回答 6

70

我想问题是你把包放在一个实际存在的虚拟 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 的文件。

于 2012-09-03T00:53:55.897 回答
26

我不确定是 Web 优化还是 WebGrease 如此挑剔，但其中一个（或两个）是，你需要非常小心。

首先，您的代码没有任何问题：

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

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

我发现了一些可以真正破坏它并导致 404 错误的事情：

  • 仅供参考：我的目录结构是Content/CSS包含imagesCSS 图像的文件夹。
  • 我必须EnableOptimizations=true在测试时强制使用捆绑包
  • 您应该做的第一件事是“查看源代码”，然后单击 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 文件中的包名称可能不完全匹配。

<link href="/Content/css/cats" rel="stylesheet"/>
于 2013-01-31T22:55:33.583 回答
4

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

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

这让我第一次感到刺痛。不确定 NuGet 包是否应该添加必要的配置，但在我的情况下不是。

于 2014-01-14T16:26:25.180 回答
3

这在我看来是正确的。启用优化后，您将只有一个 ref，它将是您在 StyleBundle (/content/css) 中指定的名称。在调试模式下（或者更具体地说，在您的 web 配置中使用 debug=false），您将正常获得未优化的文件。如果你看，你会发现它们只是你输入的纯文本。但是，当打开优化时（通常是在发布模式下运行时），您会得到一个看起来很奇怪的 URL。

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

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

于 2012-09-02T22:18:20.853 回答
3

我刚刚解决了一个类似的问题。问题如下，我通过NuGet. 在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;

解决方法是bundles.Add()像这样组合 2：

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

这为我解决了问题。

于 2013-05-26T10:48:44.883 回答
0

也可能是因为某些原因您没有将 bundleconfig.json 部署到服务器。

于 2017-12-03T22:36:03.670 回答