ホームページ >ウェブフロントエンド >jsチュートリアル >vue2.0 リソース ファイル アセットと静的使用手順
今回は、vue2.0 リソース ファイル アセットと静的の使用方法について説明します。vue2.0 リソース ファイル アセットと静的を使用する際の 注意事項 は何ですか? 以下は実際的なケースです。
プロジェクト構造には、2 つのリソース ファイル パス、つまり src/assets と static/ があります。それでは、この 2 つの違いは何でしょうか?Webpack されたリソース
この質問に答えるには、まず webpack が静的リソースをどのように処理するかを理解する必要があります。 *.vue コンポーネントでは、すべてのテンプレートと CSS が vue-html-loader と css-loader によって解析され、リソースの URL が検索されます。 たとえば、 とbackground: url(./logo.png)、"./logo.png" は両方とも相対リソース パスになります。 Webpack によってモジュールの依存関係に解析されます。
logo.pngはJavaScriptではないため、モジュールの依存関係とみなした場合、url-loaderとfile-loaderを使って処理する必要があります。 テンプレートにはこれらのローダーがすでに構成されているため、展開の問題を心配することなく相対/モジュール パスを使用できます。これらのリソースはビルド時にインライン化/コピー/名前変更される可能性があるため、基本的にはソース コードの一部となります。このため、webpack によって処理される静的リソースを、他のソース ファイルと同様に /src パスの下に配置することをお勧めします。実際、それらをすべて /src/assets の下に置く必要さえありません。 modules/components の使用に基づいてファイル構造を整理できます。たとえば、各コンポーネントとその静的リソースを独自のディレクトリに配置できます。
リソース処理ルール
相対 URL (例: ./assets/logo.png) はモジュールの依存関係として解釈されます。これらは、Webpack 出力設定に基づいて自動的に生成された URL に置き換えられます。プレフィックスのない URL (例:assets/logo.png) は相対 URL として扱われ、./assets/logo.png に変換されますプレフィックスが付いている URL は、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中国語ウェブサイトで! 推奨書籍:
以上がvue2.0 リソース ファイル アセットと静的使用手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。