導航欄favicon圖標的實現（二）——vue項目打包后favicon無法正常顯示

問題：
在使用Vue開發中添加的favicon.ico無法顯示，問題根源在於路徑，如果使用http鏈接作為favicon地址一般不會出現問題，出現問題的基本都是在使用本地圖片作為favicon。原因可能是由於打包的時候沒有配置favicon選項或者favicon路徑配置錯誤。

 

解決方法：

修改webpack配置文件

在webpack.dev.config.js 和 webpack.prod.config.js 中的  HtmlWebpackPlugin 插件選項中配置favicon選項，其中favicon的路徑是個相對路徑，代碼如下：

（1）找到build下的webpack.dev.config.js文件

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

（2）找到build下的webpack.prod.config.js文件

new HtmlWebpackPlugin({
          filename: config.build.index,
          template: 'index.html',
          inject: true,
          favicon:"src/assets/favicon.ico",      //新增
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
          },
          chunksSortMode: 'dependency',
      
    }),

 

打包后根目錄下就會有favicon.ico