关于vue.js:从零开始用elementui躺坑vue-faviconico

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