从零开始，用elementui躺坑vue - favicon.ico

ico的作用

当我们进入某些网站的时候，会发现浏览器最上方的标题栏的左侧有一个带logo的图标，这就是ico的作用。使用ico图标可以可以让读者更容易识别您的网站，增加流量收入；其次，更容易产生专业的美感，还能一定程序上减轻服务器的流量带宽费用

favicon.ico

favicon是Favorites Icon的缩写，翻译成中文就是网站头像或者是网站徽标。而ico是文件的后缀名。Favicon是与某个网站或网页相关联的图标。如我们熟悉的百度

加载favicon

1.生成ico文件

通过在线网站生成ico。如比特虫, ico51

文件名： 强烈推荐favicon.ico
文件目录： 强烈推荐放在项目的根目录

2.修改webpack配置文件

同步更新webpack.dev.conf.js 和 webpack.prod.conf.js文件。此处需要用到html-webpack-plugin插件.

webpack.dev.conf.js: 开发环境配置

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  // 配置favicon
  favicon: path.resolve('favicon.ico')
}),

webpack.prod.conf.js: 生产环境配置

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  // 配置favicon
  favicon: path.resolve('favicon.ico')
  ...
}),

注意：重新加载后生效

3.重启后，就会发现浏览器最上方的标题栏的左侧有一个带logo的图标了。

参考资料

1. html-webpack-plugin
2. webpack