捆绑的 jquery css 上的 404 错误，VS2012 发布到 Azure

问题描述

我有一个使用 jquery datepicker 的网站(在常规 VS2012 MVC4 模板中实现).在本地主机上运行时，它看起来并且工作正常.但是当我发布(到 Azure)时，一些 css 丢失了.Chrome 开发工具在两个 css 文件中显示 404 错误:

I have a web site that uses the jquery datepicker thing (implemented in regular VS2012 MVC4 template). It looks and works fine when running on localhost. But when I publish (to Azure), some of the css is missing. The Chrome dev tools show 404 errors on two css files:

http://cyclelog.azurewebsites.net/Content/jquery.ui.基础.csshttp://cyclelog.azurewebsites.net/Content/jquery.ui.theme.css

我注意到我的源代码树中没有这样的文件——而是这两个文件在 ~/Content/themes/base 下(不是直接在 Content/下).我不知道该怎么做，因为 - 就像我说的 - css 在本地主机上运行良好.

I noticed that there are no such files in my source tree--rather the two files are under ~/Content/themes/base (not directly under Content/). I didn't know what to make of this because--like I said--the css works fine on localhost.

我没有修改在默认模板中创建的捆绑配置.或者，更确切地说，我做了，但只是为了解决问题——这没有用.我在bundle初始化中恢复了原始代码:

I have not modified the bundling config as created in the default template. Or, rather, I did, but only in an effort to fix the problem--which didn't work. I restored the original code in the bundle initialization:

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css",
            "~/Content/themes/base/jquery.ui.all.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

有什么想法吗?

推荐答案

问题是在你的第一个包含 "~/Content/themes/base/jquery.ui.all.css"捆.将该文件移动到第二个包中，它会起作用.

The problem is the inclusion of "~/Content/themes/base/jquery.ui.all.css" in your first bundle. Move that file to the second bundle and it will work.

它在本地工作，因为在本地不会发生捆绑(假设您处于调试模式).该文件中的@import 起作用是因为它在正确的目录 ("/Content/themes/base/") 中查找，因为链接呈现为:

It works locally because locally, bundling doesn't occur (assuming you are in debug mode). The @import in that file works because it is looking in the correct directory ("/Content/themes/base/"), since the link is rendered as:

<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>

当您部署它时，该文件被捆绑到 ~/Content/css 中.样式表被捆绑，现在呈现为:

When you deploy this, that file gets bundled into ~/Content/css. The style sheet is bundled and now is rendered as:

<link href="/Content/css?v=IqLBj6MTQkC-CU1" rel="stylesheet"/>

所以现在两个@import 语句失败，因为该目录中不存在这两个文件.

So now the two @import statements fail since the two files do not exist in that directory.

然而，它们确实存在于 "~/Content/themes/base/" 这就是为什么它会在第二个包中工作，当一切都在发布模式下被捆绑时.

However, they do exist in "~/Content/themes/base/" which is why it will work in the 2nd bundle, when everything gets bundled in release mode.

更多阅读有关如何在本地复制此问题的信息:Scripts.Render 使用过时的 javascript 文件

More reading with info on how you can replicate this issue locally: Scripts.Render using outdated javascript file

这篇关于捆绑的 jquery css 上的 404 错误，VS2012 发布到 Azure的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！