使用release选项发布时,mvc中的单个文件中的CSS/JS包

Question

我创建了MVC应用程序.当我使用发布选项在Azure上发布应用程序时,所有css和js文件都加载到页面中的单个包中.(打开视图页面源然后显示css的单个链接).

当我在发布配置文件中发布带有Debug选项的站点时,所有CSS都会加载个人.

我的问题是发布选项主题的发布网站无法正确加载,但正确加载调试选项主题.我想仅使用Release选项发布我的应用程序.如果有人在此之前遇到此问题并获得任何解决方案,那么请帮助我.

Answer 1

我在使用捆绑之前经历过这种情况.

比如你的css文件位于: /Content/css/css.css

然后,该css文件引用另一个文件,或者例如/Content/images/image1.pngvia 的图像url('../images/image1.png').

然后设置你的css包@ /bundles/css.

在调试模式下,一切都很好看.但是,当您<compilation debug="false" ....在web.config中设置时,css文件中的引用会突然中断.如果您在Firebug/Chrome开发工具中打开控制台并检查网络选项卡,您将看到来自错误网址的资源无法加载.

发生这种情况是因为当调试模式关闭时,所有文件都会像生产中那样捆绑和缩小.在这种情况下,CSS文件将被捆绑并从URL提供/bundles/css.这会导致相对URL引用中断.它曾经引用的地方/Content/images/image1.png,现在引用/images/image1.png.

你有几个选择来解决这个问题:

1. 从与实际css文件相同的文件夹中提供捆绑的css文件.例如./Content/css/cssbundle.这可能会很快变得非常乏味.
2. 将css文件中的所有相对引用更改为绝对引用.例如.../images/image1.png会成为/Content/images/image1.png.这意味着您不能使用大量开箱即用的第三方CSS,如果您想捆绑它们,则必须检查/更改相对引用.
3. 使用BundleTransformer nuget包.它会在捆绑过程中自动将相对URL转换为绝对URL.

   StyleTransformer和ScriptTransformer类与标准实现的主要区别:从目录添加资源时排除不必要资产的能力,不会产生重新缩小预先缩小的资产,支持在CSS代码中将相对路径自动转换为绝对路径(通过使用UrlRewritingCssPostProcessor)等

我个人推荐3,因为它是最容易维持的长期.