前言

这应该是我开始写Vue项目之后遇到的最深的一个坑了。

倒不是因为多难处理，只是没有什么经验，导致爬坑费劲。

简单的知识

页面都会有一个页签LOGO，如：

移动端同理，就不截图了，比较费劲。

其中LOGO和页签上的签名就是这篇文章中会修改到的内容。

开始

在传统的H5+CSS+JS开发中，修改页签是非常快速的，只需要在html文件中修改link到的相关文件即可。

但是在vue-cli中，完完全全不是这么一回事。

由vue-cli 3.0以上版本创建的项目中，会在public下有一个index.html文件，这个文件就是整个项目的页面入口，打包后资源也会通过这个页面引入。具体是怎么实现的我还没有研究过源码，不详细说了。

我们也可以在里面看到一些猫腻：

<

这里是我之前的项目，因为引入了Vuetify所以可能会有一些复杂，但是实际上大同小异。

我们可以从中发现若干个link标签以及meta标签。除了一些样式和脚本之外，仅仅是标识出icon的就有两个，如果仔细读文件位置还可以发现另外两个，以及一个奇怪的manifest.json文件。

在这里，通常的方案是直接替换相关文件。因为我在最初测试的时候忽略了浏览器缓存的问题，所以我目前也不清楚直接替换已经标识出的文件的效果如何，为了把这篇文章水完我就当作不行吧。

在开始替换之前，我们需要先进行浏览器设置，防止由于浏览器缓存导致无法判断修改效果。

打开调试，切换到网络（Network）选项卡：

选择“禁用缓存”，这样在每次打开调试的时候都会重新加载所有的资源。

我在这里跳过一部分我寻找答案的过程。Vue这一部分的内容，几乎没有正式的文档或者是博客指出全部的内容，我在这里总结一下，以及个人的体会：

修改默认页签LOGO：

<

这里替换的核心，是必须指明 type="image/x-icon" ，也是与原文档最大差异的地方。

而shortcut icon似乎并没有什么作用，至少我目前还没有找到，但是加上也无妨。

到这一步，你已经修改了桌面端默认的LOGO。但是都0202年了，谁还会一直用桌面端啊，夕阳产业没什么希望了。

当你兴奋的打开手机想要测试一下手机端的效果，你就会大失所望。

很明显，至少是在vue-cli中，这完全不是一个入口。

我们之前提到了manifest.json文件：

实际上非常重要也非常复杂，但是我们还是可以一瞥其究竟：

{
  

我们不难发现，这个文件里指定了关于icon的关键信息。我们可以定位到这个位置（其实这个位置很浅，绝大多数情况下是一眼就能看见的）：

这里的favicon.ico实际上就是真正的页签LOGO，我们的解决方案里默认给出的也是这个名字，但是为什么在vue-cli3里完全不符，我目前还不清楚是版本迭代导致的还是只是另外一种写法。

在这个文件夹下，全部都是页签LOGO。我们也可以找到在最初指定的16x16与32x32两个png文件。

既然定位到此，把这些LOGO全部替换就可以得到你想要的结果。如果美工在的话我相信一定有更好的办法批量导出不同尺寸的png，我Photoshop比较水，一个一个导出的。

其中部分图片的尺寸是相同的，所以原则上不需要针对每个文件导出一遍。

现在我们就可以发现所有的LOGO都被替换了。甚至是浏览器的提示也可以准确捕获到。而iOS端也是相同的效果，我就不再放图了。

总结

• 使用 type="image/x-icon 额外指定LOGO（修改桌面端LOGO）
• 修改manifest.json文件中的source （修改移动端或额外指定）
• 对images下所有文件进行替换 （修改所有LOGO）

由我的经验，我的建议是全部替换，防止在某些情况下发生意外，否则我也不会怕坑这么费劲。

必须注意的是，一定要及时清除浏览器缓存，部分浏览器在清除缓存后刷新依然无效，必须重新打开页面才能看到效果。

动态修改页签标题

这里我引用别人的方法，是我目前看到的最有效也是最稳定的解决方案：

需要新建一个Title组件：

<

我的理解比较浅显，就不写了。

调用的话需要引入这个组件：

<

之后就可以正常使用了。感谢这个作者。