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

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

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

たとえば、<img src"./logo.png"> と背景 background: url(./logo.png) では、"./ logo .png」は相対パスであり、Webpack によって依存関係として読み込まれます。 <img src"./logo.png">和背景background: 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

有~前缀的路径。 ~被认为是一个模块请求，同require('some-module/image.png')

これらのリソースはビルドプロセス中にインライン化/コピー/名前変更される可能性がありますが、依然としてソースコードの重要な部分です。このため、他のリソース フォルダーと同様に、静的リソースを別の /src フォルダーに配置することをお勧めします。 実際、/src/assets にすべてを置く必要はなく、モジュール/コンポーネントごとに整理して利用できます。たとえば、コンポーネントを独自のディレクトリに配置し、静的リソースをそのディレクトリに保存できます。

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

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

「本物の」静的リソース

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