ASP.NET MVC Bundle 未在登台服务器上呈现脚本文件。它适用于开发服务器

IT技术 javascript asp.net-mvc-4
2021-01-16 18:22:20

在我们的 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。

请帮忙。谢谢。

6个回答

根据您的评论，我们需要了解该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 设置为调试编译时，或者您在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 错误）。

原来你需要 WebGrease。添加 NuGet 和下面的行后，我开始工作了。<dependentAssembly> <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35"culture="neutral" /> <bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930" />emblyAssly
2021-03-16 18:22:20
我已经完成了这些确切的步骤，但我的 @Styles.Render("~/bundles/CssBundle") 渲染 <link href="/bundles/CssBundle" rel="stylesheet"/> 会抛出 404。不知道为什么?
2021-03-24 18:22:20
我遇到了这个问题，bootstrap datepicker 没有出现在生产服务器中，所以我重新传输了所有 bin 文件，这解决了编辑包配置的问题
2021-03-25 18:22:20
@vsdev - 当我尝试渲染一个不存在的包时，我想我已经看到了。确保您在包名称和注册中有正确的语法。
2021-04-05 18:22:20
我得到 404，因为我在包虚拟路径中有一个点。删除点解决了问题。
2021-04-06 18:22:20

通过在 bundle 中添加以下行代码来配置它对我有用

bundles.IgnoreList.Clear();

点击链接获取更多解释

这是给我的。默认情况下，已经缩小的 JS 文件似乎会被忽略，因此如果您的包包含缩小的第三方库（如 jQuery），它们将被排除在外，您的站点将不再工作。
2021-03-27 18:22:20
这也是我的问题，但仅限于脚本。即使文件被预先最小化，样式包也能按预期工作。所以上面的链接信息可能不正确，说它适用于 .min.css 和 .min.js。投票了。
2021-03-29 18:22:20

我遇到了同样的问题，我不知道为什么，但结果是 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/type 并且一切正常。

如果我取消扩展，一切都会中断。那是因为@Scripts 和@Styles 没有将所有必要的属性渲染为一个没有扩展名的文件来理解 src。

是的，我的这个答案具有误导性，因为我错了。大多数浏览器并不关心它是否具有 .js 或 .css 扩展名。它将脚本标签视为脚本，链接标签视为样式表。在这种情况下，如上所述，这是因为 umbraco 需要根据上面的@Hywel Rees 为捆绑路径设置保留路径。
2021-03-21 18:22:20
@Tommy - 正如您所建议的，还有另一个潜在问题。事实证明，对于 Umbraco，您只需将 ~/bundles/ 路径添加到 web.config 中的 umbracoReservedPaths 键/值对，如下所述：our.umbraco.org/forum/umbraco-7/using-umbraco- 7/…
2021-03-30 18:22:20
很棒 - 这在 Umbraco 项目中对我有用。我认为这可能与 mime 类型有关，因为如果您将脚本/样式包的 url 粘贴到地址栏中，它实际上是有效的，但是在浏览器加载页面时却是 404'ing。
2021-03-31 18:22:20
@HywelRees - 不错的发现！这是我认为非常重要但很难找到/记住的步骤之一！
2021-04-02 18:22:20
这不是开发人员在捆绑机制中看到的典型问题。您的项目可能还有其他一些问题。
2021-04-07 18:22:20

对我来说，修复是将 System.Web.Optimization 的版本升级到 1.1.0.0 当我在 1.0.0.0 版本时，它永远不会解析子目录中的 .map 文件（即正确缩小和捆绑子目录中的脚本）

每当我在 web.config 中设置 debug="off" 并运行我的 mvc4 应用程序时，我最终都会...

<script src="/bundles/jquery?v=<some long string>"></script>

在我的 html 代码和 JavaScript 错误中

Expected ';'

有两种方法可以摆脱 javascript 错误

  1. BundleTable.EnableOptimizations = false在 BundleConfig.cs 中设置

或者

  1. 我最终使用 NuGet 包管理器来更新 WebGrease.dll。无论是 debug="true" 还是 debug="false"，它都能正常工作。
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中反转正则表达式？ 下一篇Puppeteer 登录 page.evaluate