ホームページ >ウェブフロントエンド >Vue.js >vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

coldplay.xixi
coldplay.xixiオリジナル
2020-11-09 10:08:441806ブラウズ

vue.js をパッケージ化した後の間違ったイメージ パスの解決策: 1. [assetsPublicPath: './'] を変更します; 2. [webpack.prod.conf.js] を開き、[publicPath: '] を追加します出力./']。

vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

vue.js パッケージ化後の間違った画像パスの解決策:

[関連記事の推奨事項: vue.js]

解決策は図に示すとおりです。

( 1),

vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

assetsPublicPath を変更します: './'

(2)、webpack.prod.conf.js を開きます、出力を追加: publicPath: './'

vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

リソース パス参照の問題は解決されましたが、リソース内の背景画像はまだ表示されません。背景: url( "../../assets/images/logo-index.png") no-repeat; 比較的パッケージ化された後、url(static/img/logo-index.2fbf2.png) になります。 no-repeatしたがって、CSS 参照画像の通常のパス、つまり、url(../../static/img/logo-index.2fbf2.png) no-repeat# を保持する必要があります。

## 次に、図に示すように、ビルド フォルダー内の utils.js コードを変更する必要があります。

vue.js をパッケージ化した後にイメージのパスが間違っている場合の対処方法

#Add

publicPath: '../../'このコード行は、フォントまたは画像参照の問題を解決できます。

関連する無料学習の推奨事項:

javascript (ビデオ)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。