vue-cli+webpack の静的リソースの処理と Webpack のパッケージ化手順の詳細な説明

今回は、vue-cli+webpack が静的リソースと Webpack パッケージを処理するための手順について詳しく説明します。vue-cli+webpack が静的リソースと Webpack パッケージを処理するための 注意事項 は何ですか? 、見てみましょう。

Vue-cli による Webpack パッケージ化の落とし穴

Vue プロジェクト用に Vue-cli によって構築されたスキャフォールディングは確かに非常に便利ですが、パッケージ化するときに空白のページができやすくなったり、対応する静的リソースを使用できなかったりすることがあります。ロードされています。

project/config配下のindex.jsのassetsPublicPathを「./」に変更して相対パスにすることで解決しました。

cd vue demo 
 npm run dev //运行程序 
npm run bulid //webpack打包

静的リソースの処理

vue-cli と webpack を組み合わせたプロジェクトでは、通常 2 つの静的リソース パスがあることに気づくかもしれません: src/assets と

static/、どちらも違いは何ですか?この記事では、vue-cli と webpack を組み合わせて静的リソースを扱う方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

たとえば、 <img src"./logo.png"> と背景 <a href="http://www.php.cn/wiki/892%20.%20html" target="_blank">background<p style="text-align: left;">: url(./logo.png)</p></a>、「./logo.png」は相対パスであり、Webpack によって依存関係として読み込まれます。 <img src"./logo.png">和背景<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: url(./logo.png)，”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。

但是因为logo.png并不是JavaScript，所以如果被当成一个依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader，所以你通常不用担心相对路径的部署问题。

即使这些资源有可能在构建过程中被内联/拷贝/重命名，他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源，如同其他的资源文件夹。

事实上，你都不必把他们全放在/src/assets，你可以根据模块/组件来组织利用他们。比如说，你可以把任一组件放到他们自己的目录，并在该目录下存放静态资源。

资源引入规则

相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。

没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png

有~前缀的路径。 ~被认为是一个模块请求，同<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')

ただし、logo.png は JavaScript

ではないため、依存花とみなされる場合は、 URL ローダーとファイル ローダーを通じて解析する必要があります。このテンプレートには対応するローダーがすでに構成されているため、通常は相対パスのデプロイメントの問題を心配する必要はありません。 これらのリソースはビルドプロセス中にインライン化/コピー/名前変更される可能性がありますが、依然としてソースコードの重要な部分です。このため、静的リソースを他のリソース フォルダーと同様に、別の /src フォルダーに配置することをお勧めします。 実際、/src/assets にすべてを置く必要はなく、モジュール/コンポーネントごとに整理して利用できます。たとえば、コンポーネントを独自のディレクトリに配置し、静的リソースをそのディレクトリに保存できます。

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

assets/logo.png などのプレフィックスのないパスは相対パスと同じであり、./assets/logo.png にエスケープされます

~ プレフィックスの付いたパス。 ~ は、<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>

('some-module/image. png ')。 /assets/log.png などのルート パス

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

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

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

「本物の」静的リソース🎜🎜🎜🎜対照的に、static/ 内のファイルは Webpack によって処理されません。これらはターゲット フォルダーに直接コピーされ、これらのファイルを参照するには絶対パスを使用する必要があります。 🎜🎜この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜 PHPがGoogleインターフェースを呼び出してQRコードを生成する手順の詳細な説明🎜🎜🎜🎜🎜 PHPThumb画像処理を使用する手順の詳細な説明🎜🎜🎜

以上がvue-cli+webpack の静的リソースの処理と Webpack のパッケージ化手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。