vue.jsにファビコンアイコンを追加する方法

favicon アイコンを vue.js に追加する方法: 1. [index.html] ファイルを変更します。コードは [

このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてに適用されます

【おすすめ関連記事:

vue.js】

vue.js にファビコン アイコンを追加する方法:

方法 1:index.html ファイルを変更する

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

欠点:パッケージ化した後、

favicon.ico をルート ディレクトリにコピーする必要があります

方法 2: Webpack 構成ファイルを変更します#1. build

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 新增
}),

の下にある webpack.dev.conf.js ファイルを見つけます。 build

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'), //新增
minify: {
emoveComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
...
}),

# の webpack.prod.conf.js ファイル 方法 3: vue プロジェクトをパッケージ化した後、favicon が正常に表示されなくなります

#解決策: webpack.prod.config.js の HtmlWebpackPlugin プラグイン オプションで favicon オプションを構成します。favicon のパスは相対パスです

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
inject: true
}),

構成ファイルを変更した後は再起動する必要があります

npm run dev

パッケージ化後、ルート ディレクトリに favicon が作成されます。ico

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

JavaScript

(ビデオ)

以上がvue.jsにファビコンアイコンを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。