vue项目中直接用自己的图片替换掉favicon.ico,图标为什么不生效?
- 在一般情况下:创建项目之后,默认的小图标是favicon.ico,我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可,但是我直接替换掉favicon.ico并不生效:
是因为项目使用了@vue/cli-plugin-pwa插件,这个插件会更改网页标签图标的路径,所以导致我们的项目中多出来一个public/img/icons文件夹 - 官方解释: https://www.npmjs.com/package/@vue/cli-plugin-pwa.
- 所以:我们需要在vue.config.js中更改pwa.iconPaths的路径,favicon.ico才能生效,配置如下:
module.exports = {
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
}
- 注意:修改了vue.config.js文件后,一定要 重启项目!!!!!
重启之后如果图标还是没有改变,清除一下浏览器缓存即可生效