解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
2017-10-29 23:36
721 查看
ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件:
将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径。这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量压力并没有什么改进的变化,所以推测可能出于模块化设计思想和并发方面的考虑,微软在MVC4,MVC5中将这一方式做了改变:
在新建一个ASP.NETMVC4之后站点的时候都会在~/App_Start目录下有一个BundleConfig.cs的启动文件,当然创建其他的ASP.NET4.0及4.0以上的项目也会有。这个文件里面包含了如下代码:
这段代码被放在Application_Start()中执行了:
上述Add方法的含义在于将网站引用资源根据实际情况进行分组引用,然后页面部分按照如下方式来引用:
在运行之后会生成常规引用代码,从而达到资源引用的目的。但是这个改进远远没有看起来那么简单,我们先引用《淘宝这十年》中一段话:
我们只需要将BundleTable.EnableOptimizations设置为true,MVC4就会启用压缩,将单次引用的资源文件压缩,减少请求数量和带宽,当然在开发调试时一般不开启。
那么会遇到什么问题呢?
页面中按照上面的方式引用,结果发现根本没有引用到,于是注意到MVC在设计这里的功能的时候引入了通配符,比如
可以通过版本匹配,也可以通过*号匹配但是必须放在最后,没有提会忽略哪些字符串,所以导致了上述问题。
解决方案是去掉min即可。
解决方案:对于独立的CSS单独分组如:
解决方案:
在绑定文件BundleConfig的方法RegisterBundles下设置属性:
问题解决。
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径。这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量压力并没有什么改进的变化,所以推测可能出于模块化设计思想和并发方面的考虑,微软在MVC4,MVC5中将这一方式做了改变:
在新建一个ASP.NETMVC4之后站点的时候都会在~/App_Start目录下有一个BundleConfig.cs的启动文件,当然创建其他的ASP.NET4.0及4.0以上的项目也会有。这个文件里面包含了如下代码:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
这段代码被放在Application_Start()中执行了:
BundleConfig.RegisterBundles(BundleTable.Bundles);
上述Add方法的含义在于将网站引用资源根据实际情况进行分组引用,然后页面部分按照如下方式来引用:
@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery")
在运行之后会生成常规引用代码,从而达到资源引用的目的。但是这个改进远远没有看起来那么简单,我们先引用《淘宝这十年》中一段话:
生成首页后,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS、JS(JavaScript)、图片等样式、脚本和资源文件。 但是可能相对较少的人才会知道,你的浏览器在同一个域名下并发加载的资源数量是有限的,例如IE 6和IE 7是两个,IE 8是6个,chrome各版本不大一样, 一般是4~6个。我刚刚看了一下,我访问淘宝网首页需要加载126个资源,那么如此小的并发连接数自然会加载很久。
我们只需要将BundleTable.EnableOptimizations设置为true,MVC4就会启用压缩,将单次引用的资源文件压缩,减少请求数量和带宽,当然在开发调试时一般不开启。
那么会遇到什么问题呢?
1. 自定义的JS不一定能成功加载。
我们一般习惯于将JS和CSS放置在一个大目录中,因为有些时候他们是分不开的(项目规模大了除外),比如我是将EasyUI的目录结构原原本本的放在 Content目录下,那么删除掉Scripts目录和BundleConfig.cs中无关引用,添加自己的如下:bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Content/jquery.min.js")); bundles.Add(new ScriptBundle("~/bundles/easyui").Include( "~/Content/jquery.easyui.min.js"));
页面中按照上面的方式引用,结果发现根本没有引用到,于是注意到MVC在设计这里的功能的时候引入了通配符,比如
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));
可以通过版本匹配,也可以通过*号匹配但是必须放在最后,没有提会忽略哪些字符串,所以导致了上述问题。
解决方案是去掉min即可。
BundleTable.Bundles.IgnoreList.Clear(); BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always); 让他去除对这些文件过滤限制
2.css被压缩后,里面图片路径文件的问题。
样式表中Content/themes/styles.css 里图片一般都是这样写的 background: url(img/bg.png),在启用了压缩之后路径就会改变,所以路径全部出现找不到资源的情况。解决方案:对于独立的CSS单独分组如:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
3.项目发布后Css样式及Js脚本引用丢失。
项目中使用@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery")方式引用的样式或脚本文件在发布后出现丢失的情况,页面打开后样式全乱了,但是调试的时候却是正常的。查了一下原因是这么说的:默认本地vs里面调试的时候,因为web.config文件里面有一个debug属性,当有此属性时,默认css和js是不会压缩的,此时加载的js也是不支持.min.js这种的 ,加载的都是不带min的js文件!而当发布到iis后,web.config里面没有debug属性了,此时css和js是会自动启用压缩功能,压缩后的css里面若没有指定图片相对于网站的根目录的路径 的话,图片也是没办法正常显示的,js此时也会只加载有.min的文件。
解决方案:
在绑定文件BundleConfig的方法RegisterBundles下设置属性:
BundleTable.EnableOptimizations = false;
问题解决。
相关文章推荐
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- MVC 之 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失
- mvc使用bundle发布时css丢失的解决方法
- Gulp解决发布线上文件(CSS和JS)缓存问题
- 捆绑和缩小(BundleConfig.RegisterBundles) 第五章 : MVC中的使用 | {version}用法
- Asp.net MVC下使用Bundle合并、压缩js与css文件详解
- Asp.net MVC4 使用了Bundle,引用的JS文件不能出现智能感知的解决之道
- MVC中的使用捆绑和缩小(BundleConfig.RegisterBundles)
- 捆绑和缩小(BundleConfig.RegisterBundles) 第五章 : MVC中的使用
- MVC中的使用捆绑和缩小(BundleConfig.RegisterBundles)
- MVC 通过BundleConfig 将JS和CSS文件引入到视图中
- 使用mvc时,在视图view中使用强类型视图,在web.config文件中添加命名空间namespace的引用不起作用,解决方法
- .net MVC BundleConfig.cs 合并js和css文件说明文档
- 解决Windows和Linux使用npm打包js和css文件不同的问题
- 母版页中引用图片,外部js、css文件的路径问题
- 关于更新发布CSS和JS文件的缓存问题
- 解决用run-jetty-run锁住css,js文件的问题
- css文件引用后变成了乱码导致样式不能显示的问题的解决