将网站部署到应用程序时的 mvc 捆绑和相关 css 图像答案

【问题标题】：mvc bundling and relative css image when website is deployed to an application将网站部署到应用程序时的 mvc 捆绑和相关 css 图像
【发布时间】：2015-12-02 00:55:45
【问题描述】：

要将相对图像路径转换为绝对路径，stackoverflow 中有很多问题被问到并得到了解答，如下所示：

MVC4 StyleBundle not resolving images

建议添加new CssRewriteUrlTransform()如下：

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
       .Include("~/Content/css/jquery-ui/*.css", new CssRewriteUrlTransform()));

这实际上曾经救过我。但是现在我将我的网站部署到应用程序（不是网站的根目录）仍然存在问题：

申请是：

http://localhost/sample/

但是图片的网址是这样的：

http://localhost/css/imgs/spirit.png

应该是这样的：

 http://localhost/sample/css/imgs/spirit.png

虽然捆绑的 css 链接本身是正确且有效的。

【问题讨论】：

示例是 IIS 上的虚拟目录吗？
它是 IIS 中的应用程序和虚拟目录。在此示例中，应用程序名称为 sample
看看stackoverflow.com/questions/19765238/…，它完整地描述了发生了什么和你需要做什么。

标签： css asp.net asp.net-mvc-4 bundle bundling-and-minification

【解决方案1】：

如果不涉及虚拟目录，则以下代码将执行：

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

但是当使用 VirtualDirectory 时，CssRewriteUrlTransform 将重写到 Host 而不是 Host/VirtualDirectory。解决方案是派生 CssRewriteUrlTransform ，这在此处进行了充分讨论：ASP.NET MVC4 Bundling with Twitter Bootstrap:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

【讨论】：

【解决方案2】：

这实际上只是另一个优化问题当应用程序作为虚拟目录运行时正常工作。

由于您使用虚拟目录来托管您的网站，因此您应该制作一个包装器，该包装器将使用固定路径调用 CssRewriteUrlTransform：

public class CssRewriteUrlTransformWrapper : IItemTransform
{
        public string Process(string includedVirtualPath, string input)
        {           
            return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
        }
}

More info.

【讨论】：