MVC捆绑 - 无法加载资源

时间:2013-08-24 21:23:15

标签: asp.net-mvc azure bundler durandal azure-web-sites

可能导致这种情况的原因是什么?我正在使用DurandalJS项目,该项目可以在本地构建和运行。当我尝试部署到Azure网站时,该应用程序发布但在浏览器中失败:

  

无法加载资源:服务器响应状态为404   (未找到)   http://appsite.azurewebsites.net/Scripts/vendor.js?v=KJCisWMhJYMzhLi_jWQXizLj9vHeNGfm_1c-uTOfBOM1

我没有定制任何捆绑。

我的捆绑配置:

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

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

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

DurandalBundleConfig:

public class DurandalBundleConfig {
public static void RegisterBundles(BundleCollection bundles) {
  bundles.IgnoreList.Clear();
  AddDefaultIgnorePatterns(bundles.IgnoreList);

  bundles.Add(
    new ScriptBundle("~/Scripts/vendor.js")
        .Include("~/Scripts/jquery-{version}.js")
        .Include("~/Scripts/jquery-ui-{version}.js")
        .Include("~/Scripts/bootstrap.js")
        .Include("~/Scripts/knockout-{version}.js")
        .Include("~/Scripts/knockout.mapping-latest.js")
         .Include("~/Scripts/isotope.js")
          .Include("~/Scripts/toastr.js")
          .Include("~/Scripts/tag-it.js")
    );

  bundles.Add(
    new StyleBundle("~/Content/css")
      .Include("~/Content/ie10mobile.css")
      .Include("~/Content/app.css")
      .Include("~/Content/bootstrap.min.css")
      .Include("~/Content/bootstrap-responsive.min.css")
      .Include("~/Content/font-awesome.min.css")
      .Include("~/Content/durandal.css")
      .Include("~/Content/starterkit.css")
       .Include("~/Content/toastr.css")
       .Include("~/Content/tag-it.css")
       .Include("~/Content/zen-theme.css")
    );
}

public static void AddDefaultIgnorePatterns(IgnoreList ignoreList) {
  if(ignoreList == null) {
    throw new ArgumentNullException("ignoreList");
  }

  ignoreList.Ignore("*.intellisense.js");
  ignoreList.Ignore("*-vsdoc.js");
  ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
  //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
  //ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
}
} 

在我的html页面中,我使用了这个:

@Scripts.Render("~/Scripts/vendor.js")

这可以防止加载所需的库(如淘汰赛)。它可能是我的web.comfig中的东西吗?任何提示都会很棒。

更新

如果我执行以下操作,我可以在本地重现确切的问题:

new ScriptBundle("~/Scripts/vvendor.js")  // change the virtual output directory here

我认为这意味着视图在出版时由于某种原因无法找到目录...

5 个答案:

答案 0 :(得分:23)

1。不要在包名称中使用文件扩展名

Brett所述,您的捆绑名称中不应包含文件扩展名。

原因是如果存在扩展名,IIS路由将假定请求是针对文件

2。不要将文件夹路径用作包名称

注意:这在开发中不会发生,因此在部署到生产时可能只会咬你

要避免的第二件事是拥有与项目/网站中真实文件夹名称相匹配的包名称。 IIS将匹配物理文件夹,然后再转到捆绑路由。

e.g。如果您的登录页面样式有/Content/Login文件夹,则不能使用名为~/Content/Login的捆绑包。 IIS将看到物理文件夹并假设它是目录浏览请求(您可能会从Azure服务器收到403错误)。

建议命名:

建议您在所有捆绑包中使用名称bundle,以避免目录冲突,并包括css您的项目中没有名为bundles 的文件夹(因为上面的问题2)。

示例包名称:

  • “〜/捆绑/ jquery的”
  • “〜/捆绑/加载项”
  • “〜/束/的CSS”
  • “〜/捆绑/ CSS /登录”
  • “〜/捆绑/ CSS /自举”

答案 1 :(得分:15)

删除ScriptBundle名称上的“.js”部分。由于某种原因导致一堆问题。它应该是这样的:

...
new ScriptBundle("~/Scripts/vendor")
...

然后将其添加到您的页面中:

@Scripts.Render("~/Scripts/vendor")

答案 2 :(得分:0)

我有类似的错误。

在我的情况下,我有一个名为bundles.Add(new ScriptBundle("~/js")的软件包,它在发布时没有创建javascript包。

然后我改为bundles.Add(new ScriptBundle("~/js/main")并且它有效!这很奇怪,但它确实奏效了。但我不确定究竟是什么问题。

答案 3 :(得分:-1)

您使用的是哪种版本的网络优化?有关最新优化库的信息,请参阅此Link。我在更新到版本1.1后遇到了重大更改

答案 4 :(得分:-4)

我昨天遇到了同样的问题并找到了解决方法。 但它涉及摆脱捆绑。必须有一种更好的方法来强制Azure使用js包但尚未找到它。

以下是解决方法:检查DurandalBundleConfig.cs中的scriptbundle中包含哪些js文件,并将这些文件包含在Index.cshtml中:

@*@Scripts.Render("~/Scripts/vendor")*@
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.js"></script>