vue中添加favicon 圖示 （3種方法）

首先将favicon.ico圖檔放在根目錄下，通過以下兩種方法使其顯示正确。

方法一：修改index.html檔案

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

缺點：打包後需要将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

最後為了友善大家的溝通與交流請加QQ群： 625787746

請進QQ群交流：【IT部落格技術分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140