Question

我正在使用Vue CLI webpack模板，但很难加载我自己的favicon。

我已经vue init webpack my-app

了

在index.html我已经包含：

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

...我看到了默认（Vue）图标。但是，我无法弄清楚该图标位于（或以其他方式引用）的位置，也无法确定放置自己的图标的位置，以替换它。

我也遵循了this answer中的建议，建议将favicon图像放在static文件夹中并将其包含在index.html中：

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

但是，我无法按照承诺访问我的图标。

我的猜测是在CLI配置文件中某处引用了favicon位置/文件，但我找不到它。

Answer 1

您可以将其视为常见图像，构建器会将ico编译为普通图像。 ico肯定会被合并到已编译的代码中，因为它很轻。因此，如果您的index.html在src中与img目录处于同一级别：

您将拥有index.html：

 <link href='./img/favicon.png' rel="icon" Atype="image/x-icon" />

或者您可以直接在public或dist（构建项目的位置）目录中添加它，并删除index.html的favicon标记。

如果它不起作用，那么你可能需要查看webpack config ...

我使用vue-cli 3.0.0-beta.15并使用以下命令创建我的项目：

vue create proj

并且favicon位于公共目录下：

Answer 2

我有同样的问题：

我在公用文件夹中添加了我自己的收藏夹图标，覆盖了现有的vue。但是，仍然显示vue图标。本地（vue服务）和我的服务器上（上传了使用vue build构建的dist /内容）。
然后将图标图标移到新的public / img文件夹中。尽管在调试和生产包中可以找到带有favicon的文件夹，但浏览器中并未使用该文件夹……总是显示vue favicon。我的猜测是：When vue生成dist包，它不查找任何favicon.ico文件，而只是对favicon链接进行硬编码。

我检查了index.html，创建的链接显示了图标图标的绝对链接地址：

<link rel=icon href=/favicon.ico><title>

将地址从“ /”更改为“ ./”后，它开始工作，并显示了我的图标。我可以想象在配置丛林中的某个地方隐藏了一个配置选项，但是我还没有找到;-）

如果有人知道如何获得正确的最终版本（可能的话，调试版本）的想法，那就太好了！

Answer 3

您可能还需要更新图标的清单：/public/manifest.json。

Answer 4

将webapp部署到Azure时遇到了这个问题。我有一个通过VueCliMiddleware软件包提供的dotnet core 3.1 api服务。在index.html中，原始代码为

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

添加一个“。”在BASE_URL变量语法在本地和Azure上都解决此问题之前。

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

感谢您提供以上和以下的指导！