解决Vue打包中 .ico小图标不显示的问题

00x0 写在前面

  Vue项目打包中遇到这个问题,经过查询得到了解决。故此记录。

00x1 图标检查与缓存检查

1. 检查图标。

  确认图标是可以打开的。

2. 缓存问题

  图标不显示也有可能是缓存问题,手动强制刷新一下。

00x2 通过配置webpack解决

  HtmlWebpackPlugin是webpack的Plugin提供的一个插件,该插件的基本作用就是生成HTML,主要有两个作用:

  • 为html文件中引入的外部资源如scriptlink动态添加每次compile后的hash,防止引用缓存的外部文件问题。

  • 可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置Nhtml-webpack-plugin可以生成N个页面入口。

  通过在其配置中加入favicon,在生成HTML文件的时候,为小图标指定资源的位置。

1
2
3
4
5
6
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico'
})

  修改完文件要重新npm run dev才会有效果。

00x3 根据打包后的图片路径配置index.html中.ico图标路径

  图标不显示也可能是打包后路径的路径与index.html中引入.ico的路径不一致导致。可以在打包后的文件中找到.ico文件,再在index.html中修改引入的路径。也可以将.ico文件放入指定目录下,再修改index.html中引入的路径。

Miss Me wechat
light