vue-cli3 パッケージ化後のイメージ パスが間違っている

フロントエンド技術の発展に伴い、さまざまなフレームワークやツールも登場しており、この大きな波の時代において、Vue.js は無視できない存在であることは間違いありません。ただし、Vue.js の人気が高まるにつれて、いくつかの問題に遭遇するようになります。この記事では、vue-cli3 を使用してプロジェクトをパッケージ化する際の間違ったイメージ パスの問題を紹介し、いくつかの解決策を提供します。

問題の説明

プロジェクト開発に vue-cli3 を使用する場合、通常は img タグを使用して画像を導入できます。例:

<img src="./assets/img/logo.png" alt="logo" />

logo.png 画像がプロジェクトの assets ディレクトリにあることを前提としています。 npm runserve コマンドを実行すると、イメージが正しく表示されます。しかし、パッケージ化のために npm run build コマンドを実行すると、パッケージ化されたページにアクセスすると、画像が正常に表示されないことがわかり、ブラウザの開発者ツールを使用すると、画像の読み込みが失敗することがわかります。コンソールには次のエラー メッセージが表示されました。

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

Herehttp://your-domain.com は、パッケージ化されたプロジェクトのルート ディレクトリ パスを指します。

この問題の理由

Vue.js がコンポーネント開発モデルに基づいていることはわかっています。通常、各コンポーネントは HTML テンプレートや CSS スタイルを含む個別のファイルです。JavaScript コード、など。 Vue.js の開発プロセスでは、通常、webpack パッケージ ツールを使用してビルドとパッケージ化を行います。 Webpack ファイルのパッケージ化メカニズムにより、各コンポーネントに必要なすべてのリソースが対応する JavaScript ファイルにパッケージ化されます。また、ブラウザーは HTTP リクエストを通じてのみ静的リソースを取得できるため、Webpack はリソース ファイル (画像を含む) をパッケージ化します。) パスは次のとおりです。 HTTPリクエストパスに変換されます。

つまり、相対パスを使用してリソース ファイルを参照すると、プロジェクトの実行中、および次の時点でイメージは http://localhost:8080 ルート ディレクトリで検索されます。パッケージング この時点で、画像のパスは webpack によって新しいパスとしてパッケージ化され、ルート ディレクトリの下の img ディレクトリに配置されます。したがって、webpack パッケージ ファイルを使用する場合は、パスを変更する必要があります。

解決策

静的リソースのルート パスを変更する

vue.config.js の publicPath フィールドを変更できます。値を使用してルート パスを置き換えることにより、間違ったパスの問題が解決されます。

まず、プロジェクトのルート ディレクトリに新しい vue.config.js ファイルを作成し、次のコードを入力します:

module.exports = {
  publicPath: './'
}

ここに publicPath実際には、パッケージ化された静的リソースの保存パスを設定します。上記のコードは、静的リソースと index.html が同じディレクトリに保存されていることを示しています。

画像を参照するために絶対パスを使用する

publicPath を変更して問題を解決することに加えて、画像を参照するために絶対パスを直接使用することもできるため、相対パス、という質問が来ます。例:

<img src="/img/logo.4aebf758.png" alt="logo" />

ここの / はプロジェクトのルート パスを表します。この方法で参照される画像は相対パスの影響を受けません。

画像ファイルを public ディレクトリに配置する

画像ファイルを /public ディレクトリに配置することもできます。このディレクトリ内のファイルは webpack によってパッケージ化されません。代わりに、それをパッケージ化されたディレクトリに直接コピーします。このようにして、相対パスを使用してこれらの画像を直接参照できます。

概要

パスを変更する場合でも、絶対パスを使用して画像を参照する場合でも、解決策は比較的簡単です。実際の開発では、パス エラーの問題を軽減するために、開発中に良い習慣を身につけ、絶対パスを使用したり、イメージをパブリック ディレクトリに配置したりすることができます。これにより、デバッグとメンテナンスが容易になるだけでなく、パッケージ化後のパス エラーも減少します。この記事がお役に立てば幸いです。

以上がvue-cli3 パッケージ化後のイメージ パスが間違っているの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。