Favicon CLI视图

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"/>

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

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

Answer 1

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

• 凸出/ SRC / index.html中
• 凸出/ SRC / IMG / favicon.ico的

你将在index.html：

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

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

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

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

vue create proj

并且favicon在公共目录下：

• PROJ /公/ favicon.ico的

Answer 2

我也有同样的问题：

• 我在公共文件夹中添加了自己的favicon，覆盖了现有的vue。但仍然，vue favicon出现了;本地（vue serve）和我的服务器（上传了使用vue构建的dist /内容）。
• 然后我将favicon移动到一个新的public / img文件夹中。尽管带有favicon的文件夹在调试和生产包中可用，但它没有在浏览器中使用...总是出现了vue favicon。我的猜测是：当vue构建dist包时，它不会查找任何favicon.ico文件，只需硬编码favicon链接。

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

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

在我将地址从“/”更改为“./”后，它工作了，我的favicon被显示出来了。我可以想象在配置丛林中某处隐藏了一个配置选项，我还没有找到;-)

如果有人知道如何建立一个正确的最终（如果可能的话：调试）版本，那就太棒了！