ASP.NET MVC 5项目中Bootstrap源映射（404）错误的解决方法咨询

嘿，这个问题我之前帮好几个开发者捋清楚过，完全不用动Bootstrap的源文件就能搞定，给你几个靠谱的方案，按推荐程度排序：

方案1：自定义捆绑转换移除源映射注释（最推荐） #

ASP.NET的捆绑系统允许我们添加自定义转换，用来修改最终输出的CSS/JS内容。我们可以写一个简单的转换器，把Bootstrap文件里的源映射引用注释去掉，这样浏览器就不会去请求不存在的map文件了。

首先在项目里新建一个类（比如放到App_Start目录下）：

using System.Text.RegularExpressions;
using System.Web.Optimization;

public class RemoveSourceMapTransform : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        // 匹配并移除CSS和JS中的sourceMappingURL注释
        return Regex.Replace(input, @"\/\*# sourceMappingURL=.*?\*\/", string.Empty, RegexOptions.Multiline);
    }
}

然后修改BundleConfig.cs里的捆绑注册代码，给Bootstrap的捆绑添加这个转换器：

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.min.css",
    "~/Content/site.css")
    .Transforms.Add(new RemoveSourceMapTransform()));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.min.js")
    .Transforms.Add(new RemoveSourceMapTransform()));

这样捆绑后的输出文件就不会包含源映射的引用，自然就不会出现404错误了。

方案2：将源映射文件移动到捆绑对应的虚拟路径下 #

这个方法更直接，不需要写代码，但需要手动调整文件位置：

• 你的CSS捆绑虚拟路径是~/Content/css，那就在Content目录下新建一个css文件夹，把bootstrap.min.css.map复制进去；
• 你的JS捆绑虚拟路径是~/bundles/bootstrap，就在项目根目录新建bundles/bootstrap文件夹，把bootstrap.min.js.map复制进去。

这样浏览器会去正确的虚拟路径下查找源映射文件，就不会报404了。缺点是每次更新Bootstrap版本时，都要同步移动对应的map文件。

方案3：使用CDN加载Bootstrap #

如果你的项目可以使用CDN，这也是个省心的选择——CDN上的Bootstrap文件已经配置好了正确的源映射路径，浏览器能正常找到map文件。

修改BundleConfig.cs开启CDN支持：

bundles.UseCdn = true;
// 替换成你使用的Bootstrap版本对应的CDN链接
var bootstrapCssCdn = "https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css";
var bootstrapJsCdn = "https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js";

// 注册CDN捆绑，本地文件作为回退
bundles.Add(new StyleBundle("~/Content/css", bootstrapCssCdn).Include(
    "~/Content/site.css"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap", bootstrapJsCdn));

这样生产环境会直接从CDN加载，调试环境如果启用了BundleTable.EnableOptimizations = false，会使用本地文件，这时候可以结合方案1来避免本地调试时的404。

为什么会出现这个问题？ #

简单说：Bootstrap的min文件里的sourceMappingURL是相对物理文件的路径，比如bootstrap.min.css里写的是/*# sourceMappingURL=bootstrap.min.css.map */，当ASP.NET把它捆绑到~/Content/css这个虚拟路径后，浏览器会去~/Content/css/bootstrap.min.css.map找文件，但实际你的map文件在~/Content/目录下，自然就404了。

内容的提问来源于stack exchange，提问作者dotmike