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 の下に置く必要さえありません。モジュール/コンポーネントの使用法に基づいてファイル構造を整理できます。たとえば、各コンポーネントとその静的リソースを独自のディレクトリに配置できます。

リソース処理ルール

相対 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中国語ウェブサイトで！

推奨書籍:

JS を使用して HTML タグを動的に追加する方法

JS を使用して入力テキスト ボックス データを取得および変更する方法

以上がvue2.0 リソース ファイルのアセットと静的な使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。