vue怎么改logo_vue项目添加网页logo

网上关于为vue项目添加网页logo的文章很多，步骤很简单，但是博主还是踩了坑，特此记录一下[○･｀Д´･ ○]

先上效果：

1.首先，要为网页添加logo我们需要一张ico格式的图标。

可以用网上的在线转换工具，将“jpg/png”格式的图片转为“ico”，格式，这里我用的是“比特虫”,

最好选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/kangax/html-minifier#options-quick-reference

},

// necessary to consistently work with multiple chunks via CommonsChunkPlugin

chunksSortMode: 'dependency',

chunks: ['manifest', 'vendor', 'login']

})