vue.js中怎麼加入favicon圖標

vue.js加入favicon圖示的方法：1.修改【index.html】文件，程式碼為【

本教學操作環境：windows10系統、vue2.9，本文適用於所有品牌的電腦。

【相關文章推薦：vue.js】

vue.js新增favicon圖示的方法：

方法一：修改index.html檔

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

缺點：打包後需要將favicon.ico複製到根目錄

方法二：修改webpack設定檔

1、找到build下的webpack.dev.conf.js檔

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

2、找到build下的webpack.prod.conf.js檔

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

方法三：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中怎麼加入favicon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！