今天使用@vue/cli搭建了一个项目，然后想修改一下网页的icon图标。但是在public文件夹下直接替换图标，不会改变网页的icon图标。

文件夹目录如下：

用项目logo的icon文件替换原始的icon，重启项目还是vue默认的icon。

解决方法：

第一步：用项目logo替换原始icon。
第二步：在项目根目录下新建一个vue.config.js文件。

第三步：在vue.config.js文件中写入以下代码：

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

第四步：重启项目。然后就可以看见网页icon改成你的项目logo了。

原因：

在其GitHub上有详细介绍。
@vue/cli-plugin-pwa