图标在 vue cli 项目中没有改变

本文介绍了图标在 vue cli 项目中没有改变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<html lang="zh-cn"><头><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 路由器实践</title><身体><noscript><strong>很抱歉，如果未启用 JavaScript，vue-todo 将无法正常工作.请启用它继续.</noscript><div id="应用程序"></div><!-- 构建的文件将被自动注入--></html>

这是我在 public 文件夹中的 index.html 文件的代码.还有一个名为 favicon.ico 的图标文件.但是当我运行我的开发服务器时，没有显示图标.请帮帮我.

我试图改变<link rel="icon" href="<%= BASE_URL %>favicon.ico">到<link rel="icon" href="/favicon.ico">但它也不起作用.当我输入 localhost:8080/favicon.ico 时，它会显示我的网站图标.

此外，当我在 chrome 开发工具上调试时，有正确的 HTML 标签.

<头><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 路由器实践</title>

预期结果:应显示网站图标.

解决方案

我有同样的问题.. 但我成功解决了这个问题，当我在属性 rel，但我不知道为什么..

 favicon.ico">

替换为:

 favicon.ico">

<!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.There is also an icon file named 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.and when i type localhost:8080/favicon.ico, it is showing my favicon.

Also, there are correct HTML tags when I debug on chrome dev tool.


<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.

解决方案

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..

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

replace with:

    <link rel='icon' href="<%= BASE_URL %>favicon.ico">

这篇关于图标在 vue cli 项目中没有改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！