CSS & 在 IIS 8 (Windows 8) 上部署 ASP.Net MVC 应用程序时未呈现 JS 文件

Question

我在远程 IIS 8 上部署 Asp.NET MVC 5 Web 应用程序时遇到问题！当我启动服务器时，应用程序运行良好，但没有 css 或 js 文件在运行！

我的本地机器：

我的远程机器：

我点击查看页面源代码（在浏览器中）时的视图：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log in - My MVC Admin Template</title>
    <link href="/Test/Deploy/Content/Theme?v=A1Wwh5B5yTT6Q-34hA0bU7wzaNpIMgCZT8xJ-IAWWVY1" rel="stylesheet"/>

    <script src="/Test/Deploy/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>


 </head>
<body class="bootstrap-admin-with-small-navbar">
<div class="container">
    <div class="row">
     <div class="row">
       <form action="/Test/Deploy/" class="bootstrap-admin-login-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="C7q6oci5GoiOMjIeCGgn9-U4lMlx54WJz8117lyBbFcbDak6TzJE2z3kKeBkvyJTJxg6viMGh8dOxCUV2qUP87bZBWyXgMsx3g9Tozmxoc41" />        
        <h1>Login</h1>
         <div class="form-group">
            <input class="form-control" type="text" name="Email" placeholder="Email">
             <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
             </div>
             <div class="form-group">
        <input class="form-control" type="password" name="Password" placeholder="Password">
        <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <div>
            <div class="checkbox">
                <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" />
                <label for="RememberMe">Remember me?</label>
            </div>
        </div>
    </div>
    <button class="btn btn-lg btn-primary" type="submit">Submit</button>
  </form>
   </div>
    </div>
    <div class="row">
        <hr>
        <footer role="contentinfo">
            <p>&copy;  2015 -  <a href="" target="_blank">Test</a></p>
        </footer>
    </div>
</div>

<script src="/Test/Deploy/bundles/jquery?v="></script>

<script src="/Test/Deploy/bundles/bootstrap?v=a0JlrK3HWJYO4CANWtnjZQ6r-FHTgFewh3ItuNGmfr41"></script>


<script src="/Test/Deploy/bundles/jqueryval?v=NOVQDySGO89wzMzO5x7mWS4C_uAdynpZe_Lk2y-xEM41"></script>



<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-45396411-1', 'azurewebsites.net');
    ga('send', 'pageview');

</script>

我的 BundleConfig.cs :

    public class BundleConfig
{
    public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
    {
        if (ignoreList == null)
            throw new ArgumentNullException("ignoreList");
        ignoreList.Ignore("*.intellisense.js");
        ignoreList.Ignore("*-vsdoc.js");
        ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
        //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
        ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
    }

    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();
        AddDefaultIgnorePatterns(bundles.IgnoreList);
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/respond.js"));

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

        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*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js"
            , "~/Scripts/twitter-bootstrap-hover-dropdown.js"
            ));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

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

        //Calendar css file
        bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
            "~/Content/themes/jquery.ui.all.css",
            "~/Content/fullcalendar.css"));

        //Calendar Script file
        bundles.Add(new ScriptBundle("~/bundles/fullcalendarjs").Include(
            "~/Scripts/jquery-ui-1.10.4.min.js",
            "~/Scripts/fullcalendar.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/vendors").Include(
            "~/Content/Theme/vendors/uniform/jquery.uniform.js"
            , "~/Content/Theme/vendors/chosen.jquery.js"
            , "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
            , "~/Content/Theme/vendors/twitter-bootstrap-wizard/jquery.bootstrap.wizard-for.bootstrap3.js"
            , "~/Content/Theme/vendors/boostrap3-typeahead/bootstrap3-typeahead.js"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.js"
            , "~/Content/Theme/vendors/ckeditor/ckeditor.js"
            , "~/Content/Theme/vendors/tinymce/js/tinymce/tinymce.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
            , "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.js"
            , "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
            , "~/Content/Theme/vendors/sparkline/jquery.sparkline.js"
            , "~/Content/Theme/vendors/tablesorter/js/jquery.tablesorter.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.selection.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.resize.js"
            , "~/Content/Theme/vendors/fullcalendar/fullcalendar.js"
            ));

        bundles.Add(new StyleBundle("~/Content/Theme").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/css/bootstrap-admin-theme.css",
            "~/Content/Theme/css/site.css"));

        bundles.Add(new StyleBundle("~/Content/Vendors").Include(
            "~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
            , "~/Content/Theme/css/datepicker.fixes.css"
            , "~/Content/Theme/vendors/uniform/themes/default/css/uniform.default.min.css"
            , "~/Content/Theme/css/uniform.default.fixes.css"
            , "~/Content/Theme/vendors/chosen.min.css"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.css"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart_custom.css"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
            , "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.css"
            , "~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
            , "~/Content/Theme/vendors/fullcalendar/fullcalendar.css"));
    }
}

我的登录页面：

@model LoginViewModel
@{
  ViewBag.Title = "Log in";
 }

 <div class="row">
     @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "bootstrap-admin-login-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <h1>Login</h1>
    <div class="form-group">
        <input class="form-control" type="text" name="Email" placeholder="Email">
        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
    </div>
    <div class="form-group">
        <input class="form-control" type="password" name="Password" placeholder="Password">
        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
    </div>
    <div class="form-group">
        <div>
            <div class="checkbox">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>
        </div>
    </div>
    <button class="btn btn-lg btn-primary" type="submit">Submit</button>
}
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
 }

在我的 Web.Config 文件中我放了这个：

 <system.webServer>
   <modules runAllManagedModulesForAllRequests="true">
     <remove name="BundleModule" />
     <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
     <remove name="FormsAuthentication" />
     <remove name="ApplicationInsightsWebTracking" />
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Extensibility.Web.RequestTracking.WebRequestTrackingModule, Microsoft.ApplicationInsights.Extensibility.Web" preCondition="managedHandler" />
   </modules>
   <validation validateIntegratedModeConfiguration="false" />
 </system.webServer>

我在网上看到了很多解决方案，服务器端和项目端都有！我在 windows 功能中启用了 static content。我按照此处 Bundler not including .min files 更改了 BundleConfig.cs 文件，但没有任何效果！

注意：我的一个页面在 razor 文件中定义了一些样式，它呈现得很好！所以我认为问题出在捆绑文件中的某个地方！

有人可以帮我吗？

<==== 编辑 =====>

我刚刚放入我的 Web.Config 文件 :

  <compilation debug="false" targetFramework="4.5" />

我本地机器的结果是没有样式的（就像远程机器一样）如果它能帮助别人理解...

Answer 1

如果网站受 SSL 保护，请确保您的资源有一个完全合格的地址。这是我首先想到的。

-G

Answer 2

我解决了问题！

感谢 Bundling & minification not applying css & js using Asp.net 4.0 C# !

我所要做的就是在我的 bundleConfig.cs 文件中更改名称：

  bundles.Add(new StyleBundle("~/Content/Theme").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/css/bootstrap-admin-theme.css",
            "~/Content/Theme/css/site.css"));

到

  bundles.Add(new StyleBundle("~/Content/allcss").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/style/bootstrap-admin-theme.css",
            "~/Content/Theme/style/site.css"));

Answer 3

作者的回答是正确的，但没有帮助。我必须更深入地研究才能解决这个问题。我发现当您将应用程序发布到生产环境或出于任何原因而您的 bundle.config 文件配置不正确时，您将遇到 CSS/JS 未呈现的问题。为了解决这个问题，我不得不在 bundle.config 文件中进行一些更改。同一文件夹中的所有样式文件都在一个虚拟路径下，如果您有其他 CSS 文件位于不同的文件夹下，您必须为它们创建一个新的包。例如我的自定义 css 名为 "site.css" 和 "bootstrap.css" 在同一个文件夹中，所以我创建了

bundles.Add(new StyleBundle("~/Content/allcss").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"

                  ));`

然后我还有 font-awsome，我想将其包含在项目中。所以我创建了另一个包

bundles.Add(new StyleBundle("~/Content/css/font-awsome").Include(
                 "~/Content/css/font-awesome.css"
            ));

然后我将这两个路径都添加到我的 Layout.cshtml 文件中。

 @Styles.Render("~/Content/allcss")
@Styles.Render("~/Content/css/font-awsome")

很有魅力。

CSS & 在 IIS 8 (Windows 8) 上部署 ASP.Net MVC 应用程序时未呈现 JS 文件

CSS & JS files not rendered when deploy of ASP.Net MVC application on IIS 8 (Windows 8)

javascript

css

razor

asp.net-mvc-4

bundling-and-minification