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

00x0 写在前面

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

00x1 图标检查与缓存检查

1. 检查图标。

  确认图标是可以打开的。

2. 缓存问题

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

00x2 通过配置webpack解决

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

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

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

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

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中引入的路径。