ASP.NET MVC Bundle不在临时服务器上呈现脚本文件。它适用于开发服务器

时间:2014-01-21 22:58:19

标签: javascript asp.net-mvc-4

在我们的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>之外的所有上述脚本标记都将丢失。我们已经验证了这些标记中提到的所有文件都在脚本文件夹中。文件夹结构与开发机器上的完全相同。在登台服务器上,web.config fie具有<compilation targetFramework="4.0" />,默认情况下,这意味着debug =“false”。

因此,某些JavaScript函数在登台服务器上失败。登台和开发机器都是Windows 2012。

请帮忙。感谢。

8 个答案:

答案 0 :(得分:97)

根据您的意见,我们需要了解Bundling机制在MVC中的工作原理。

修改:根据VSDev下面的评论,您需要确保在项目中安装WebGreaseNuGet是安装此软件包最简单的方法。

设置捆绑配置时(示例不是从上面说明)

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

然后,在您的观看中,您可以调用@Scripts.Render("~/bundles/mainJs")之类的内容。当您的web.config设置为调试编译 OR 时,您使用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错误)。

答案 1 :(得分:7)

我遇到了同样的问题,我不确定原因,但事实证明,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 /类型,并且一切正常。

如果我取消延期,一切都会中断。这是因为@Scripts和@Styles没有渲染所有必要的属性来理解src到没有扩展名的文件。

答案 2 :(得分:6)

通过在包中添加以下代码行来配置它对我有用

bundles.IgnoreList.Clear();  

Follow the link for more explanation

答案 3 :(得分:2)

对我来说,修复是将System.Web.Optimization的版本升级到1.1.0.0当我在1.0.0.0版时,它永远不会解析子目录中的.map文件(即正确缩小和捆绑脚本)一个子目录)

答案 4 :(得分:2)

每当我设置debug =&#34; off&#34;在我的web.config中运行我的mvc4应用程序,我最终会...

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

在我的html代码和JavaScript错误

Expected ';'

有两种方法可以摆脱javascript错误

  1. 在BundleConfig.cs中设置BundleTable.EnableOptimizations = false
  2. OR

    1. 我最终使用NuGet Package Manager来更新WebGrease.dll。无论debug =&#34; true&#34;它都能正常工作。或者调试=&#34; false&#34;。

答案 5 :(得分:1)

我使用了Identity2,然后没有为匿名用户加载Scripts,然后我在 webconfig 和Sloved中添加了此代码。

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

答案 6 :(得分:1)

启用捆绑包优化时要检查的事情;

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 this to non minified ver.
  1. 确保css和js包的名称唯一。

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

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

  2. 确保在捆绑包配置中使用@ Script.Render和Style.Render的Render名称相同。 例如

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

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

答案 7 :(得分:0)

将此操作添加到全局文件中。

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