Vue 2.0 favicon图标显示问题

Favicon是 favorites icon 的缩写，意为收藏夹图标，也可以叫做网站头像，多体现在标签页上，给人以专业感！

接下来说下在vue2.0项目中的配置：

 1.生成ico图标

使用在线生产器，将网站logo等具有网站标识的图片做成ico图标，这个网络上有很多，可自行百度（自己用的最多是比特虫）

2.放置ico图标

这里我是将生产好的ico图标放在index.html的同级目录下（注：若将ico图标放于其他路径下，后续配置的地址也将不同，请自行处理）

3.配置webpack文件（2处）

webpack.dev.conf.js  plugins 中配置

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: './favicon.ico'  // 新增设置
})

webpack.prod.conf.js  plugins 中配置

new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    favicon: './favicon.ico', // 新增配置
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
})

4.添加link

在index.html头部中添加link（注：这里href的地址是打包后的地址，如ico图标的路径不同，这里也不尽相同）

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

到这步所有的配置已经都完成了，不能看到效果的重新编译一次就好了