今回は、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 は、JavaScript でリソース パスを取得する
Webpack が正しいリソース パスを返すようにするには、require('./relative) を使用する必要があります。 /path/to/file.jpg') は、file-loader によって解析され、処理された URL が返されます。例:
を使用して、解像度が正しいことを確認する必要があります。ルート ディレクトリに相対的な URL (例: /assets/logo.png) は処理されませんcomputed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}「実際の」静的リソース
比較として、static/ の下にあるファイルは Webpack によって処理されません。同じファイル名が使用され、最終パスに直接コピーされます。 config.js に追加された build.assetsPublicPath および build.assetsSubDirectory に応じて、これらのファイルをたとえば、以下のデフォルト値は次のとおりです:// config/index.js
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
} JS を使用して入力テキスト ボックス データを取得および変更する方法
以上がvue2.0 リソース ファイルのアセットと静的な使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
