捆绑的 css 链接出现 404 错误

Question

我正在尝试让捆绑在 ASP.NET MVC 4 中工作。我从为捆绑的 CSS 生成的链接中收到 404 错误。我做了以下事情：

1. 通过 NuGet (v4.0.20710.0) 安装“Microsoft ASP.NET Web 优化框架”包

2. 在 App_Start 目录中创建了一个 BundleConfig 类，内容如下：

   using System.Web.Optimization;
   namespace BsdAppTemplate.Web_Nancy.App_Start
   {
       public class BundleConfig
       {
           public static void RegisterBundles(BundleCollection bundles)
           {
               bundles.Add(new StyleBundle("~/bundles/styles/cvi").Include(
                   "~/mainstyles.css"
               ));
           }
       }
   }
   

3. 在站点根目录的 Web.config 中添加了以下内容：

   <system.web>
       <compilation debug="false" targetFramework="4.5" />
   
       <pages>
         <namespaces>
           <add namespace="System.Web.Optimization"/>
           ...
         </namespaces>
       </pages>
   </system.web>
   

4. 在我的 MVC 布局文件的 head 元素中添加了以下内容：

    @Styles.Render("~/bundles/styles/cvi")
   

5. 将 BundleConfig 中引用的 CSS 文件（“mainstyles.css”）复制到我的 Web 项目的根目录中。

当我查看渲染文件的源代码时，我可以看到链接显示为：

<link href="/bundles/styles/cvi" rel="stylesheet"/>

当浏览到此链接或在 Chrome 的网络标签中查看页面请求时，此链接会导致 404。

我也在网络表单上尝试了等效的方法，但我从添加时生成的链接中得到了相同的结果 (404)：

<%: Styles.Render("~/bundles/styles/cvi") %>

Answer 1

我想我会分享发生在我身上的事情，在我的机器上工作时，我使用“debug=false”运行，所以每个单独的文件都被加载了，但是当推送到 stage/prod 时，我从 /bundles/styles 得到了 404。

原来我有一个重写规则是强制尾部斜杠所以请求

/bundles/styles 被重定向到不存在的/bundle/styles/。为重写添加了一个例外，现在一切正常。

Answer 2

如果您在使用 Umbraco 时遇到此错误，请不要忘记将此行添加到您的 web.config：

<add key="Umbraco.Core.ReservedUrls" value="~/bundles/" />

Answer 3

在我的 WebAPI 中找不到所有以“~/bundles/...”开头的包名称。 将该行添加到我的 RouteConfig.cs 类

    routeCollection.Ignore("bundles/{*catch}");

解决了我的问题。

Answer 4

我遇到了同样的问题（在 ASP.Net 网络表单中），我通过忽略 Global.asax 中的“bundles/”路由解决了我的问题：

routeCollection.Ignore("bundles/{*catch}");

Answer 5

通过谷歌搜索结果找到了这个问题，但在我的情况下，Windows 2008 需要在 web.config 中使用它才能在编译 debug=false 时工作。

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

没有这个，它在 Win7 开发机器上运行良好。

Answer 6

我遇到了同样的问题，我的脚本包突然以 404 响应。我的解决方案类似于我在this blogpost 上找到的@fiat 答案。

解决方案是在system.webServer 部分的模块部分中删除并添加BundleModule。

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

Answer 7

您似乎错过了通过在Application_Start 中调用RegisterBundles 来应用配置的步骤：

protected void Application_Start()
{
    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    ...
}

通常在 BundleConfig 类已经存在的情况下（作为项目模板的一部分或在安装期间由 NuGet 包创建），此调用也已经存在 - 这就是为什么许多教程都隐含它的原因。

您还应该知道BundleConfig 类用于分离关注点并保持Application_Start 干净。在简单的情况下，没有什么可以阻止您直接在 Application_Start 中注册捆绑包：

protected void Application_Start()
{
    ...
    BundleTable.Bundles.Add(new StyleBundle("~/bundles/styles/cvi").Include("~/mainstyles.css"));

    ...
}