Vue显示favicon.icon的方法

网站在服务器上部署后,如果报以下错误,是因为缺少favicon。

Vue显示favicon.icon的方法

解决方法:

1.制作favicon.ico文件,如使用favicon在线工具制作,然后把favicon.ico放在项目根目录下。

2.修改dev环境下webpack配置文件

我们可以在build/webpack.dev.conf.js配置

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

使得网站在开发环境下出现favicon。

效果如下:

Vue显示favicon.icon的方法

 

3.修改build环境下webpack配置文件

我们可以在build/webpack.prod.conf.js配置

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
    ? 'index.html'
    : config.build.index,
  template: 'index.html',
  inject: true,
  favicon: path.resolve('favicon.ico'),
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}),

打包后即可。

ps:由于浏览器缓存原因,重新部署到服务器后,favicon可能不会出现,这时需要清除浏览器的浏览数据。

 

上一篇:echarts图例换行时icon对齐方式


下一篇:如何在 Mac 中更改文件夹图标,换上喜欢的图像 Icon?