vue で静的リソースをパッケージ化する方法

この記事では主に Vue の静的リソースのパッケージ化における落とし穴と解決策を紹介します。この記事では主にパスの問題を解決します。

この記事は主に、

①.vue-cli デフォルト構成がパッケージ化され、特定のパスにデプロイされる場合の静的リソース パス エラーの問題を解決します

②。静的リソースのパッケージ化で相対パスが使用されると、CSS ファイルに大きな画像が導入されます。パスエラー。

1. 問題

vue-cli スキャフォールディングは、npm run build を実行することでデフォルトのパッケージ設定ファイルを生成します:

//ip:port/public/springActivity/

などの特定のパスにプロジェクトをデプロイします。

これにアクセスした場合:

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 ファイルは、まずless、postcss などによって処理され、その後処理されます。 ExtractTextPlugin による。 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で生成された静的ディレクトリに直接置くこともできますが、この方法では、イメージ名に md5 文字列を追加できません。これはバージョン管理に役立ちません。 :

jQuery でエッジ バウンス アニメーション効果を実現する方法

vue cli webpack で Sass を使用する方法 (詳細なチュートリアル)

jQuery P のラベル テキスト値を変更する方法

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