图标在 vue cli 项目中没有改变
[英]Favicon not changing in vue cli project
问题描述
<!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">
<title>Vue Router Practice</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-todo doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
This is the code of my index.html file in the public folder.
这是我在public文件夹中的index.html文件的代码。 There is also an icon file named favicon.ico .还有一个名为favicon.ico的图标文件。 But when I run my dev server, the favicon is not showed.但是当我运行我的开发服务器时，没有显示图标。 Please help me.请帮我。
I have tried to change <link rel="icon" href="<%= BASE_URL %>favicon.ico"> to <link rel="icon" href="/favicon.ico"> but it's not working either.我试图将<link rel="icon" href="<%= BASE_URL %>favicon.ico">更改为<link rel="icon" href="/favicon.ico">但它也不起作用。 and when i type localhost:8080/favicon.ico , it is showing my favicon.当我输入localhost:8080/favicon.ico ，它会显示我的网站图标。
Also, there are correct HTML tags when I debug on chrome dev tool.此外，当我在 chrome 开发工具上调试时，有正确的 HTML 标签。
<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">
<title>Vue Router Practice</title>
</head>
Expected result: favicon should be shown.预期结果：应显示网站图标。
5 个解决方案
解决方案1
17 2020-08-27 12:18:03
I have a same problem.. but I success to fix this, when I switch the double quote to simple quote in the attribute rel , but I don't know why..我有同样的问题..但我成功解决了这个问题，当我在属性rel中将双引号切换为简单引号时，但我不知道为什么..
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
replace with:用。。。来代替：
<link rel='icon' href="<%= BASE_URL %>favicon.ico">
解决方案2
3 2021-03-01 03:43:41
If you're using PWA, check your public/img/icons folder too.如果您使用的是 PWA，也请检查您的public/img/icons文件夹。 And make sure that your favicon-16x16.png and favicon-32x32.png files are not the default ones.并确保您的favicon-16x16.png和favicon-32x32.png文件不是默认文件。
And also best way to force cache is to hit the favicon address directly而且强制缓存的最佳方法是直接点击网站图标地址
http://yourwebsite.com/favicon.ico
and press control+f5 for windows/linux or shift+command+R for Mac.并按control+f5为 windows/linux 或shift+command+R为 Mac。 You will see it changes.你会看到它的变化。 Then navigate back to your webpage and it will be refreshed.然后导航回您的网页，它将被刷新。
解决方案3
1 2019-12-20 15:03:00
I had this issue and it seemed that Chrome was caching the favicon (was working on multiple projects at once).我遇到了这个问题，似乎 Chrome 正在缓存网站图标（同时处理多个项目）。 So a clear of the cache and closing the browser tab and restart is what worked for me因此清除缓存并关闭浏览器选项卡并重新启动对我有用
解决方案4
1 2020-06-22 08:29:00
就我而言，我也将项目创建为PWA ，因此我还需要更改所有相关图标
解决方案5
0 2020-10-05 08:39:30
我在 PWA 项目中也遇到了这个问题，但清除缓存修复了它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.