vue項目添加網頁logo

網上關於為vue項目添加網頁logo的文章很多，步驟很簡單，但是博主還是踩了坑，特此記錄一下[○･｀Д´･ ○]

先上效果：

1.首先，要為網頁添加logo我們需要一張ico格式的圖標。

可以用網上的在線轉換工具，將“jpg/png”格式的圖片轉為“ico”，格式，這里我用的是“比特蟲”,

附上鏈接：http://www.bitbug.net/

最好選16*16格式的，比較兼容

生成后的文件記得重命名為“favicon.ico”（這里就是博主踩的第一個大坑，我自己去了個名字“logo.icon”，結果怎么試都不成功！）

注意一下使用說明：

最后使用方形的圖片來制作，否則轉換成的圖標會“缺胳膊少腿”（第二個坑）

2.有了ico圖標后，把它放在項目文件夾下，這里我直接放在根路徑

然后修改build下面的文件夾：

找到這一段：

加入標紅的文字，如果是多入口的項目，則根據需求為每個頁面添加圖標即可

dev和pro文件都需要修改，因為dev對應的是我們本地運行環境，pro對應的是實際生產環境，若是只修改一個的話，則會導致本地或者服務器上添加logo失敗！

    new HtmlWebpackPlugin({
      filename: config.build.login,
      template: 'login.html',
      inject: true,
      favicon:'favicon.ico',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'login']
    })