1.vue-cli3构建的项目目录中有public,该目录下的favicon.ico就是指图标，index.html文件里面可以链接该图标。
2.首先将favicon.ico文件修改为自定义的logo，名称不变。
以下代码为inde.html中的内容，红色边框中的代码即可链接自己的logo,蓝色边框的代码用于修改标题
4.在vue.config.js里面加入以下代码
module.exports = {
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
1.vue-cli3构建的项目目录中有public,该目录下的favicon.ico就是指图标，index.html文件里面可以链接该图标。2.首先将favicon.ico文件修改为自定义的logo，名称不变。以下代码为inde.html中的内容，红色边框中的代码即可链接自己的logo,蓝色边框的代码用于修改标题4.在vue.config.js里面加入以下代码module.exports={ pwa:{iconPaths:{f...
发现问题原因
后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa
打开上面链接后可以看到插件更改了网页标签图标的路径
在开发中经常需要为项目添加favicon以增加网站辨识度，在使用Vue开发中出现添加的favicon.ico无法显示问题，如下给出解决方法：
问题分析：
问题根源在于路径，如果使用http链接作为favicon地址一般不是出现问题，出现问题的基本在使用本地图片作为favicon。
如下常规配置：
在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下，同时在index.html中正确配置favicon路径。
项目启动后会发现该中配置方式并没有生效：
打包后的项目同样存在问题。
(很抱歉的说，写到这里才发现我目前并没有解决本地无法添加favicon的问题，只是解
直接去根目录下的/blog/_config.yml添加修改favicon，失败
更改icon图片存放位置，并在主题/themes/yilia/_config.yml文件中修改对应路径，失败
去/blog/public/index.hmtl下F12
vue项目中直接用自己的图片替换掉favicon.ico，图标为什么不生效？
在一般情况下：创建项目之后，默认的小图标是favicon.ico，我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可，但是我直接替换掉favicon.ico并不生效：
是因为项目使用了@vue/cli-plugin-pwa插件，这个插件会更改网页标签图标的路径，所以导致我们的项目中多出来一个public/img/icons文件夹
官方解释： https://www.npmjs.com/package/@vue/
<h3>回答1：</h3><br/>vue-cli2和vue-cli3有一些重要的区别:
1.配置文件: vue-cli2使用的是`config/index.js`文件来配置项目,而vue-cli3使用的是`.env`和`.env.xxx`文件来配置项目.
2.构建工具: vue-cli2使用的是webpack1,而vue-cli3使用的是webpack4.
3.项目结构: vue-cli2项目结构比较简单,而vue-cli3提供了更加灵活的项目结构.
4.插件系统: vue-cli2使用的是全局插件,而vue-cli3使用的是局部插件.
5.使用方式: vue-cli2是全局安装,而vue-cli3是局部安装.
<h3>回答2：</h3><br/>Vue-cli是一个vue.js的官方脚手架工具，它可以帮助我们更快地搭建一个基于Vue的项目。Vue-cli2和Vue-cli3是Vue-cli的不同版本，在一些方面存在一些显著的差异。
1. 项目结构：
Vue-cli2生成的项目结构中，代码和配置信息都放在同一个文件夹中，每一个功能模块都需要手动创建；而Vue-cli3采用了新的配置方案，将项目的配置信息单独抽离出来，并且在工具创建项目时自动生成了更完整的项目结构，使项目结构更加清晰和易于管理。
2. 配置方式：
Vue-cli2是通过修改webpack.config.js文件来进行项目配置的，而Vue-cli3则是通过创建vue.config.js文件来进行项目配置的。在Vue-cli3中，我们可以直接在vue.config.js中添加一些特定的配置，而无需修改webpack.config.js文件。这样做更加方便，也更加容易管理项目的开发和部署。
3. 优化：
在Vue-cli3中，作者对项目进行了一些自动优化的处理，例如：自动抽取第三方库等，以优化打包和运行速度。而Vue-cli2则需要手动配置优化选项。
总之，Vue-cli3相比Vue-cli2在工程化方面有了更多的改进和优化，我们将会更加方便、快捷地构建一个基于Vue的项目。
<h3>回答3：</h3><br/>Vue是一个流行的JavaScript框架，它允许开发人员构建动态Web应用程序。而Vue CLI是Vue的脚手架工具，用于快速构建Vue项目。Vue CLI 2和Vue CLI 3是Vue CLI的不同版本，下面将介绍它们之间的不同：
1.项目结构：Vue CLI 2生成的项目结构是采用传统的单一的Webpack配置文件，而Vue CLI 3则是基于插件的灵活的配置，将Webpack配置拆分为多个小的配置文件。
2.依赖：Vue CLI 2使用的是Vue Router 2，而Vue CLI 3升级到了Vue Router 3，同时也使用了全新的Vuex。
3.插件化: Vue CLI 3采用了插件化的概念，每个插件都可以为开发者提供定制的Webpack配置和功能增强。
4.内置功能：Vue CLI 3集成了一些内置功能如：PWA支持、自动生成样式和文档等。
5.提高性能：Vue CLI 3对webpack的配置进行了深度优化，提供了更优秀的性能表现，同时还加入了预编译，tree shaking 外置化了 `webpack`,对项目编译速度支持了更大的提升。
总的来说，Vue CLI 3采用了更先进的技术、更简单的配置结构、更多的内置功能和更好的性能。如果你计划开始一个新的Vue项目，强烈建议使用Vue CLI 3，以提高代码的开发效率和性能。
