vue-cli パッケージ化されたイメージ パス エラーを解決する

今回は、vue-cli パッケージ化の画像パスエラーの解決策を紹介します。vue-cli パッケージ化された画像のパスエラーを解決するための注意事項は何ですか。実際のケースを見てみましょう。

最近、初めて vue-cli を使用してプロジェクトをビルドし、サーバーにデプロイしたとき、写真をロードできませんでした。オンラインの方法を組み合わせて解決しました。サーバーへのプロジェクトのデプロイには 2 つのタイプがあります。1 つはサーバーのルート ディレクトリに直接デプロイすることで、もう 1 つはサーバーのサブディレクトリにデプロイすることです

1. まず、ルート ディレクトリにデプロイしましょう (例: www.****.com

) プロジェクトのconfigフォルダーの下にあるindex.jsファイル

を見つけます。 ファイル内の assetsPublicPath: '/' を次のボックスに変更します。

この目的は、絶対パスを相対パスに変更することです

ルートディレクトリに置いておけば大丈夫です

2. www.***.com/community/dist

のようなサブディレクトリに配置します。 2つのステップに分かれており、最初のステップは上記と同じです

npm run buildコマンドでパッケージ化した後、イメージが表示されるようにdistファイルをコミュニティフォルダーに配置します。

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

推奨読書:

画像を生成するためのノード操作テキスト

AngularJs ユーザーがログインするときの対話と検証手順の詳細な説明

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