アセットと静的ユースケース分析

今回は、アセットと静的のユースケースの分析をお届けします。アセットと静的を使用する際の注意点は何ですか? 以下は実際のケースです。

リソース ファイルの処理

プロジェクト構造には、2 つのリソース ファイル パス、つまり src/assets と static/ があります。それでは、この 2 つの違いは何でしょうか?

Webpack されたリソース

この質問に答えるには、まず webpack が静的リソースをどのように処理するかを理解する必要があります。 *.vue コンポーネントでは、すべてのテンプレートと CSS が vue-html-loader と css-loader によって解析され、リソースの URL が検索されます。

たとえば、 と背景: url(./logo.png)、"./logo.png" はどちらも相対リソース パスであり、Webpack によって解決されます。モジュールの依存関係。

logo.pngはJavaScriptではないため、モジュールの依存関係とみなした場合、url-loaderとfile-loaderを使って処理する必要があります。 テンプレートにはこれらのローダーがすでに構成されているため、デプロイメントを気にせずに相対/モジュール パスを使用できます。これらのリソースはビルド時にインライン化/コピー/名前変更される可能性があるため、基本的にはソース コードの一部となります。このため、webpack によって処理される静的リソースを、他のソース ファイルと同様に /src パスの下に配置することをお勧めします。実際、それらをすべて /src/assets の下に置く必要さえありません。モジュール/コンポーネントの使用状況に基づいてファイル構造を整理できます。たとえば、各コンポーネントとその静的リソースを独自のディレクトリに配置できます。

リソース処理ルール

相対 URL (例: ./assets/logo.png) はモジュールの依存関係として解釈されます。これらは、Webpack 出力設定に基づいて自動的に生成された URL に置き換えられます。プレフィックスのない URL (例:assets/logo.png) は相対 URL として扱われ、./assets/logo.png に変換されます

プレフィックスが付いている URL は、require('some-module /image と同様) として扱われます。 .png')。Webpack のモジュール処理構成を利用したい場合は、このプレフィックスを使用します。たとえば、アセットのパス解決がある場合は、 を使用して、解像度が正しいことを確認する必要があります。ルート ディレクトリに相対的な URL (例: /assets/logo.png) は処理されません

JavaScript でリソース パスを取得する

Webpack が正しいリソース パスを返すようにするには、require('./relative) を使用する必要があります。 /path/to/file.jpg') は、file-loader によって解析され、処理された URL が返されます。例:

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

上記の例では、./bgs/ パスにあるすべてのイメージが最終ビルドに含まれることに注意してください。これは、Webpack が実行時にどのイメージが使用されるかを推測できないため、すべてが含まれることになります。そのうちの。

「実際の」静的リソース

比較として、static/ の下にあるファイルは Webpack によって処理されません。同じファイル名が使用され、最終パスに直接コピーされます。これらのファイルを参照するには、config.js に追加された build.assetsPublicPath および build.assetsSubDirectory に応じて、絶対パスを使用する必要があります。

たとえば、以下のデフォルト値は次のとおりです:

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

static/ ディレクトリに配置されたすべてのファイルは、絶対 URL /static/[ファイル名] を使用して参照される必要があります。 assetSubDirectoryの値をassetsに変更すると、これらのURLは/assets/[ファイル名]になります

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

vue+props を使用してデータを転送する方法

SQL 通常と mybatis 通常の使用方法の詳細な説明

以上がアセットと静的ユースケース分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。