在我们的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。
请帮忙。感谢。
答案 0 :(得分:97)
根据您的意见,我们需要了解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设置为调试编译 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)
答案 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错误
BundleTable.EnableOptimizations = false
OR
答案 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"
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.
确保css和js包的名称唯一。
bundles.Add(new StyleBundle("~/bundles/datatablescss").Include( ...) );
bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include( ...) );
确保在捆绑包配置中使用@ Script.Render和Style.Render的Render名称相同。 例如
@Styles.Render("~/bundles/datatablescss")
@Scripts.Render("~/bundles/datatablesjs")
答案 7 :(得分:0)
将此操作添加到全局文件中。
protected void Application_Start() {
BundleConfig.RegisterBundles(BundleTable.Bundles);
}