解决Vue项目在火狐浏览器favicon.ico不显示的问题
2023-04-06 本文已影响0人
剑指流云
解决Vue项目在火狐浏览器favicon.ico不显示的问题
- 出现该问题的原因：
可能是打包后自动生成的link标签导致了head中的link标签失效，如下图所示
webpak打包后的代码中出现了这样的标签
- 解决思路：
既然是打包过程中出现了link标签覆盖失效的问题，那么只需要保证我们自己的配置能够覆盖自动生成的配置即可。
即将link标签加到文件最后，加？的写法是据说firefox browser favicon.ico显示有bug
* @LastEditTime: 2023-04-07 15:07:37
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href=".<%= BASE_URL %>favicon.ico" type="image/x-icon" />
<title></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<!-- 解决火狐浏览器显示图标的问题 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico?" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico?" type="image/x-icon" />
</html>
