44

ここで何が正しくないのだろうか。ASP.NET C# MVC4 を使用しており、新しい css/js 最適化機能を利用したいと考えています。

ここに私のHTML部分があります

@Styles.Render("~/content/css")

これが私のBunduleConfig.cs部分です

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

// BundleTable.EnableOptimizations = true;

出力 (作品):

<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>

ただし、HTML出力のコメントを外すと、BundleTable.EnableOptimizations = true;次のようになります

<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>

そして、これはもちろん 404 です。どこで何か間違ったことをしたのかわかりません。助けてください。初めて MVC4 を使用します。

4

6 に答える 6

70

問題は、実際には存在するがディレクトリである仮想 URL にバンドルを配置することだと思います。

MVC はバンドルから仮想ファイルを作成し、バンドル パスとして指定したパスからそれを提供しています。

この問題の正しい解決策は、既存のディレクトリに直接マップされないバンドル パスを使用し、代わりにそのディレクトリ内で (実際のファイル名にもマップされない) 仮想ファイル名を使用することです。

例：

サイトに /content/css という名前のフォルダーがある場合は、css バンドルを次のように作成します。

BundleConfig.cs で:

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

そしてページ上：

@Styles.Render("~/content/css/AllMyCss.css")

これは、css フォルダーに AllMyCss.css という名前のファイルがないことを前提としていることに注意してください。

于 2012-09-03T00:53:55.897 に答える
26

それが Web の最適化なのか、それとも WebGrease なのかはわかりませんが、どちらか (または両方) が非常にうるさいので、細心の注意を払う必要があります。

まず第一に、コードに問題はありません:

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

実際、これはまさにマイクロソフトが行っていることです。CSS を使用しない主な理由~/bundlesは、画像の相対パスが台無しになることです。ブラウザがバンドルをどのように認識するかを考えてみてください。他の URL を認識するのとまったく同じ方法で、相対パスに関してはすべての通常のパス関連のルールが引き続き適用されます。CSS に への画像パスがあると想像してください../images/bullet.png。ブラウザを使用している場合、実際には存在しない~/bundles上のディレクトリを検索することになります。bundlesそれはおそらく~/imagesあなたがおそらく持っている場所を探すことになるでしょう~/content/images。

実際にそれを壊して404エラーを引き起こす可能性のあるいくつかのことを見つけました:

  • 参考までに: 私のディレクトリ構造には、CSS 画像用Content/CSSのフォルダーが含まれています。images
  • テスト中EnableOptimizations=trueにバンドルの使用を強制する必要があります
  • 最初に行うべきことは「ソースを表示」で、css リンクをクリックするだけで機能するかどうかを確認できます。

たとえば、猫に関するサイトを開発しているとしましょう。あなたはこれを持っているかもしれません

 @Styles.Render("~/Content/css/cats.css")    // dont do this - see below why

 bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

これにより、HTML 内のこのパスへの CSS リンクが生成されます。

/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1

ただし、拡張子 .css を付けると IIS (と思われる) が混乱するため、これにより 404 が返されます。

これを次のように変更すると、正常に動作します。

 @Styles.Render("~/Content/css/cats")

 bundles.Add(new StyleBundle("~/content/css/cats").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

他の人がすでに指摘しているもう 1 つの問題は、やってはいけないことです。

 @Styles.Render("~/Content/css")

cssディレクトリにcssディレクトリまたはファイルがある場合（拡張子なしで呼び出されるファイルがある可能性は低いです） Content。

追加のトリックは、生成された HTML にバージョン番号があることを確認する必要があることです。

<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>

そうでなく、このように見える場合は、バンドル テーブルと cshtml ファイルの間でバンドル名が完全に一致していない可能性があります。

<link href="/Content/css/cats" rel="stylesheet"/>
于 2013-01-31T22:55:33.583 に答える
4

バンドルされている HttpModule があることを確認することを忘れないでください。

<modules>  
  <remove name="BundleModule" />  
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />  
</modules>

これは初めて私を刺しました。NuGet パッケージで必要な構成を追加する必要があるかどうかはわかりませんが、私の場合はそうではありませんでした。

于 2014-01-14T16:26:25.180 に答える
3

それは私には正しいように見えます。最適化を有効にすると、参照は1つだけになり、StyleBundle（/ content / css）で指定した名前になります。デバッグモード（またはより具体的には、Web構成でdebug = falseを使用）では、最適化されていないファイルを通常どおり取得します。見てみると、入力したとおりのプレーンテキストであることがわかります。ただし、最適化がオンになっている場合（通常、リリースモードで実行している場合）、代わりに奇妙なURLが表示されます。

その出力を見ると、縮小されます。クエリ文字列？v = 5KLoJ ....は、バンドル内のファイルから取得されたハッシュに基づいています。これは、参照を必要な限り安全にHTTPキャッシュできるようにするためです。あなたが空想なら永遠に、しかし私はデフォルトが年であると思います。ただし、スタイルシートのいずれかを変更すると、新しいハッシュが生成され、それが「キャッシュバスティング」になるため、ブラウザで新しいコピーを取得できます。

そうは言っても、なぜ404を取得するのかわかりません。これは、ルーティング構成またはIISセットアップに関係していると思われます。IISExpressを使用してVisualStudioで実行していますか？

于 2012-09-02T22:18:20.853 に答える
3

同様の問題を解決しました。問題は次のとおりでした。 経由で「選択」をインストールしNuGetました。BundleConfigクラスでは、ファイルを含む行は次のCSSようになります。

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

そのクラスのどこかに私はこの行を持っていました:

BundleTable.EnableOptimizations = true;

修正は、次のbundles.Add()ように2つを組み合わせることでした：

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

そして、それは私のためにそれを修正しました。

于 2013-05-26T10:48:44.883 に答える
0

また、何らかの理由で bundleconfig.json をサーバーにデプロイしていないことが原因である可能性もあります。

于 2017-12-03T22:36:03.670 に答える