ASP.NET MVC Bundle 未在登台服務器上呈現腳本文件。 它適用於開發服務器

Question

在我們的 ASP.NET MVC 4 Web 應用程序中，我們的 BundleConfig.cs 包括以下內容：

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*"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

當我們在開發服務器上查看主頁的 html 時，我們可以看到以下腳本標記，即使 web.config 中的調試模式設置為 true 作為<compilation debug="true" targetFramework="4.0" /> ：

<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/AFR/Scripts/modernizr-2.5.3.js"></script>
<script src="/AFR/Scripts/jquery-1.7.1.js"></script>
<script src="/AFR/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/AFR/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/AFR/Scripts/jquery.validate.js"></script>
<script src="/AFR/Scripts/jquery.validate.unobtrusive.js"></script>

但是當我們在登台服務器上部署應用程序並查看主頁的 html（查看源代碼）時，除了<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>之外的所有上述腳本標記<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>缺失。 我們已經驗證了這些標簽中提到的所有文件都在腳本文件夾中。 文件夾結構與開發機器上的完全相同。 在臨時服務器上，web.config 文件具有<compilation targetFramework="4.0" /> ，這意味着默認情況下是 debug="false"。

因此，某些 JavaScript 函數在登台服務器上失敗。 登台機器和開發機器都是 Windows 2012。

請幫忙。 謝謝。

Answer 1

根據您的評論，我們需要了解Bundling機制在 MVC 中的工作方式。

編輯：根據VSDev下面的評論，您需要確保WebGrease安裝到您的項目中。 NuGet最簡單的方法就是安裝這個包。

當您設置捆綁配置時（示例不是上面的說明）

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js"));

然后，在您的視圖中，調用類似@Scripts.Render("~/bundles/mainJs") 。 當您的 web.config 設置為調試編譯時，或者您在BundleConfig.cs文件中使用以下行明確關閉捆綁

BundleTable.EnableOptimizations = false;

然后，在您的視圖中，您將看到以下呈現的內容

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

這些是組成我們的捆綁包的單個項目，未壓縮並單獨列出。 這些在調試模式下單獨列出的原因是，您可以調試腳本並在編寫腳本時查看它們（實際變量名稱等）。

現在，當我們不在調試編譯中並且沒有關閉EnableOptimizations功能時，MVC 將在我們的包中組合這些文件，壓縮（縮小）它們並僅輸出單個腳本標記。

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

請注意，源與包配置中的包名稱相同。 此外，每當您更改該包中的文件時， ?v=后面的數字都會更改。 這是為了幫助防止客戶端瀏覽器緩存舊的 js 和 css 文件。

您的腳本仍然存在並正在輸出，但它們正在被壓縮並組合成一個名為/bundles/mainJs文件。 此功能存在於

A)壓縮文件並減少傳輸的信息，

B)減少調用網站以檢索呈現頁面所需的內容的次數。

什么都沒有丟失，聽起來一切都按預期工作。 在生產站點中，縮小使這些文件幾乎無法讀取，因此為什么在調試時縮小不生效。

至於為什么 jQuery UI 仍然是單個 JS 文件，請確保沒有人將其硬編碼到您的布局視圖中。 至於 JS 錯誤，可能是您的開發框中存在的錯誤，也可能是某些內容沒有正確壓縮（但是，在我的所有 MVC 開發中，由於縮小錯誤，我還沒有看到 JS 錯誤）。

Answer 2

我遇到了同樣的問題，我不知道為什么，但結果是 Scripts.Render 生成的腳本鏈接沒有 .js 擴展名。 因為它也沒有 Type 屬性，所以瀏覽器無法使用它（chrome 和 firefox）。

為了解決這個問題，我更改了我的包配置以生成帶有 js 擴展名的編譯文件，例如

            var coreScripts = new ScriptBundle("~/bundles/coreAssets.js")
            .Include("~/scripts/jquery.js");

        var coreStyles = new StyleBundle("~/bundles/coreStyles.css")
            .Include("~/css/bootstrap.css");

注意new StyleBundle(...而不是說~/bundles/someBundle ，我說的是~/bundlers/someBundle.js或~/bundles/someStyles.css ..

這會導致在啟用優化時在 src 屬性中生成的鏈接具有 .js 或 .css ，因此瀏覽器根據文件擴展名知道要在 get 請求中使用什么 mime/type 並且一切正常。

如果我取消擴展，一切都會中斷。 那是因為@Scripts 和@Styles 沒有將所有必要的屬性渲染為一個沒有擴展名的文件來理解 src。

Answer 3

通過在 bundle 中添加以下行代碼來配置它對我有用

bundles.IgnoreList.Clear();  

點擊鏈接獲取更多解釋

Answer 4

對我來說，修復是將 System.Web.Optimization 的版本升級到 1.1.0.0 當我在 1.0.0.0 版本時，它永遠不會解析子目錄中的 .map 文件（即正確縮小和捆綁子目錄中的腳本）

Answer 5

每當我在 web.config 中設置 debug="off" 並運行我的 mvc4 應用程序時，我最終都會...

<script src="/bundles/jquery?v=<some long string>"></script>

在我的 html 代碼和 JavaScript 錯誤中

Expected ';'

有兩種方法可以擺脫 javascript 錯誤

1. 在 BundleConfig.cs 中設置BundleTable.EnableOptimizations = false

或者

2. 我最終使用 NuGet 包管理器來更新 WebGrease.dll。 無論是 debug="true" 還是 debug="false"，它都能正常工作。

Answer 6

我使用了 Identity2，然后腳本沒有為匿名用戶加載，然后我在webconfig和 Sloved 中添加了這段代碼。

<location path="bundles">
<system.web>
  <authorization>
    <allow users="*" />
  </authorization>  
</system.web>
 </location>

Answer 7

啟用捆綁優化時要檢查的事項；

BundleTable.EnableOptimizations = true;

和

webconfig debug = "false"

---

1. bundles.IgnoreList.Clear();

這將忽略包的縮小資產，如*.min.css或*.min.js ，這可能會導致腳本的未定義錯誤。 修復是用原始資產替換.min資產。 如果你這樣做，你可能不需要bundles.IgnoreList.Clear(); 例如

bundles.Add(new ScriptBundle("~/bundles/datatablesjs")
       .Include("~/Scripts/datatables.min.js") //<-- change and point this to your (original) non minified ver.

2. 確保 css 和 js 包的名稱是唯一的。

bundles.Add(new StyleBundle("~/bundles/datatablescss").Include( ...) );

bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include( ...) );

3. 確保你使用的 @Script.Render 和 Style.Render 的渲染名稱在你的包配置上是相同的。 例如

@Styles.Render("~/bundles/datatablescss")

@Scripts.Render("~/bundles/datatablesjs")

Answer 8

將此操作添加到您的全局文件中。

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