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']
    })