vue-cli と webpack が静的リソースを処理する方法

静的リソースの処理

vue-cli と webpack を組み合わせたプロジェクトでは、通常、src/assets と static/ という 2 つの静的リソース パスがあることに気づくかもしれません。この記事では、vue-cli と webpack を組み合わせて静的リソースを扱う方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

パッケージ化されたリソース

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

たとえば、 および背景: url(./logo.png) では、「./logo.png」は相対パスであり、依存関係の読み込みとして扱われます。 。

ただし、logo.png は JavaScript ではないため、依存する花とみなされる場合は、url-loader と file-loader を通じて解析する必要があります。このテンプレートには対応するローダーがすでに構成されているため、通常は相対パスのデプロイメントの問題を心配する必要はありません。

これらのリソースはビルドプロセス中にインライン化/コピー/名前変更される可能性がありますが、依然としてソースコードの重要な部分です。このため、静的リソースを他のリソース フォルダーと同様に、別の /src フォルダーに配置することをお勧めします。

実際、/src/assets にすべてを置く必要はなく、モジュール/コンポーネントごとに整理して利用できます。たとえば、コンポーネントを独自のディレクトリに配置し、静的リソースをそのディレクトリに保存できます。

リソース導入ルール

./assets/logo.png などの相対パスはモジュールの依存関係に解析されます。これらは、Webpack 出力設定に基づいて自動的に生成された URL に置き換えられます。

assets/logo.png などの接頭辞のないパスは相対パスと同じで、./assets/logo.png にエスケープされます

~ 接頭辞が付いたパス。 ~ は、require('some-module/image.png') と同じモジュール リクエストとみなされます。 /assets/log.png などのルート パス

JavaScript でリソース パスを取得します

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

このリソース パスもファイルローダーによって処理され、処理されたパスを返します。そして、Webpack は bgs ディレクトリ内のすべての画像を一度にロードします。

「実際の」静的リソース

対照的に、static/ 内のファイルは Webpack によって処理されません。これらはターゲット フォルダーに直接コピーされ、これらのファイルを参照するには絶対パスを使用する必要があります。

関連する推奨事項:

thinkphp5 で静的リソース パスと定数をロードする方法の例

以上がvue-cli と webpack が静的リソースを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。