vue の静的リソースのパッケージ化の問題

今回は、vue静的リソースのパッケージ化の問題について説明します。vue の静的リソースのパッケージ化における注意事項とは何ですか?実際のケースを見てみましょう。

①. vue-cli のデフォルト設定は、静的リソース パス エラーのためにパッケージ化され、特定のパスにデプロイされます。

1. 問題

vue-cli スキャフォールディングで生成されたデフォルトのパッケージング

構成ファイル

。パッケージ化後、プロジェクトを特定のパスにデプロイします: //ip:port/public/springActivity/

にアクセスします。 time:

http://ip:port/public/springActivity/index.html

index.html には正常にアクセスできますが、参照された js、css、およびその他のファイルサーバーの応答はすべて 404 です。インポートされたリソースのパスを確認してください以下:

http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css

http://ip:port/static/js/app.815851e87b083afb82bf.js

2. 分析

をご覧いただけます。上記より、問題は、リソースのパッケージ化パスが間違っていることです。パッケージ化されたリソースは絶対ルート ディレクトリ パスを使用するため、プロジェクトが特定のディレクトリにデプロイされると、導入されたリソース パスが正しく解析されません。

3.

がパッケージ化時に静的リソースを処理するために相対パスを使用する必要があるという問題を解決するには、ビルド (config/index.js、ビルド オブジェクト) のリソース リリース パス構成を変更します。 ' toassetsPublicPath: ' ./',

再度パッケージ化してリソースを特定のパスにデプロイしてからアクセスします:

この時点でindex.htmlには正常にアクセスでき、jsやcssのリソースにも正常にアクセスできます、ただし、CSSで導入されたassetsディレクトリの下にあります。大きな画像リソース(サーバー404)でエラーが発生しました

4. 再分析

次のようにインポートされた画像リソースのパスを表示します:

http://ip:port/public/ springActivity/static/css/static/img/question_bg. 61a2825.png

実際のプロジェクトのリソースパスは次のとおりです:

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

明らかに画像インポートパスが間違っています。画像のインポート パスを分析すると、そのパスには「/static/css」という 2 つの追加ディレクトリがあることがわかりました。css ディレクトリ内の css ファイルは、画像のパスを「/static/img/question_bg.61a2825.png」にインポートすると推測されます。 . cssファイルを確認し、cssで導入した画像のパスは以下の通りです:

background

:url(static/img/question_bg.61a2825.png)

5.

css内のパスの問題を解決する場合ファイルをパッケージ化するリンクのリソース パスが正しく設定されていない可能性があります。パッケージ化プロセスを分析します。css は js で導入されるか、vue ファイルに記述されます。css ファイルは、処理後に最初に処理されます。 , ExtractTextPlugin によって js 内のすべての CSS が app.css ファイルに抽出されます。

まず、options.extract を false に設定し、CSS 抽出機能をオフにし、再度パッケージ化して特定のディレクトリにデプロイし、http://ip:port/public/springActivity/index.html にアクセスして、ページをバンと表示します。正常に表示され、大公開されます。ほぼ完了です。

パッケージ化されたファイルを分析すると、css ファイルが存在しないことがわかります。css ファイルはすべて app.js ファイル内にあることがわかり、そのため、画像リソースのパスが導入されています。 CSS ファイル内の は、インデックス .html ファイル パス、つまり「static/img/question_bg.61a2825.png」を基準とした相対パスである必要があります。これは、以下の CSS ファイル内の画像リソース パスと一致しているため、画像にアクセスできます。通常は。

background:url(static/img/question_bg.61a2825.png) これで、問題がどこにあるのかがわかったと確信しました。つまり、CSS ファイルを抽出するときに ExtractTextPlugin がリソース導入パスを変換しなかったため、app.css が相対アプリを導入します。css ディレクトリは「static/img/.png」の静的リソースです。index.html に対する相対パスは static/css/static/img/.png です。

そのため、ExtractTextPlugin プラグインを使用する場合は、静的リソース パス パラメーターも設定する必要があります。データをクエリすることで、publicPath: "../../": を追加することで問題を解決できることがわかりました。

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader',
 publicPath:"../../"     //添加
 })
}

パッケージ化して特定のディレクトリにデプロイした後、index .html ファイルにアクセスすると、ページ上のすべてが正常に動作し、app.css ファイルが正常にインポートされ、画像リソースも正常にインポートされます。インポートする app.css ファイルを確認します。画像リソースは次のとおりです:

background:url(../../static/img/question_bg. 61a2825.png

publicPath が設定されると、CSS ファイルに導入される画像ファイル パスの前にパス設定が追加されます。

publicPath 属性値は、パッケージ化された app.css ファイルからindex.html ファイルへの相対パスです。

画像リソースはvue-cli で生成された静的ディレクトリは上記の問題を回避しますが、この方法ではイメージ名に md5string を追加できないため、バージョン管理に役立ちません

上記は、の内容全体ですこの記事が皆さんの学習に役立つことを願っています。また、皆さんも Script House をサポートしていただければ幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

datepicker の使用方法

物流マップを作成するための mixin の高レベルコンポーネント

D3.js の使用方法の詳細な説明

以上がvue の静的リソースのパッケージ化の問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。