vue-cli3项目更改favicon图标

vue-cli3项目有默认的favicon图标，如下图：

一般我们都需要把favicon图标更改为我们对应项目的logo图标，方法如下：

 

第一步：

将项目public目录下的原图标替换为新图标，名称和后缀保持不变。

第二步：

在项目根目录的vue-config.js文件中配置（vue-cli3默认没有该文件，需要自己手动添加）

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    }
  }
};

第三步：

重新运行项目，并刷新浏览器。

现在看到的favicon图标就是我们自己的favicon图标了，如下：

 

ok，完美解决！