Asp.net-Mvc

MVC 捆綁 - 無法載入資源

  • February 11, 2016

這可能是什麼原因造成的?我正在使用在本地建構和執行的 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

我認為這意味著視圖由於某種原因在發佈時找不到目錄…

去掉 ScriptBundle 名稱上的“.js”部分。出於某種原因,這會導致一系列問題。應該是這樣的:

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

然後將其添加到您的頁面,如下所示:

@Scripts.Render("~/Scripts/vendor")
  1. 不要在包名中使用文件副檔名

正如Brett提到的,你的包名中不應該有文件副檔名。

這樣做的原因是,如果存在副檔名,IIS 路由將假定請求是針對文件的。

  1. 不要使用文件夾路徑作為包名

注意:這不會在開發中發生,因此可能只會在您部署到生產時才會咬你

要避免的第二件事是捆綁名稱與您的項目/網站中的真實文件夾的名稱相匹配。IIS 將在使用捆綁路由之前匹配物理文件夾。

例如,如果您有一個/Content/Login用於登錄頁面樣式的文件夾,則不能使用名為~/Content/Login. IIS 將看到物理文件夾並假定它是一個目錄瀏覽請求(您可能會從 Azure 伺服器收到 403 錯誤)。

建議命名:

建議您bundle在所有捆綁包中使用該名稱,以避免目錄衝突,並包括在內css在您的項目中永遠不要有一個名為 bundles 的文件夾(因為上面的問題 2)。

捆綁包名稱範例:

  • “〜/捆綁/ jquery”
  • “〜/捆綁/外掛”
  • “~/捆綁包/css”
  • “~/bundles/css/登錄”
  • “~/bundles/css/bootstrap”

等等

引用自:https://stackoverflow.com/questions/18423253