问题现象:

vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖,因此设置小图标的时候按原来的方法会出现问题
在页面源文件index.html的标签之间插入

<link rel="shortcut icon" href=" /favicon.ico" /> 

仍然无法加载小图标


解决方法:

HtmlWebpackPlugin插件中加入小图标
vue脚手架时修改webpack.dev.conf.js配置文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: './favicon.ico', // 添加小图标
      inject: true
    }),

不要忘记webpack.prod.conf.js中也需要添加哦

注:( favicon放入根目录(就是src同级的目录),favicon是以根目录为相对路径,而不是webpack.dev.conf.js配置文件为相对路径。)
修改完配置项后,重新npm run dev 刷新页面后小图标就出来了

Logo

前往低代码交流专区

更多推荐