vue-cli3項(xiàng)目有默認(rèn)的favicon圖標(biāo)，如下圖：

一般我們都需要把favicon圖標(biāo)更改為我們對(duì)應(yīng)項(xiàng)目的logo圖標(biāo)，方法如下：

?

第一步：

將項(xiàng)目public目錄下的原圖標(biāo)替換為新圖標(biāo)，名稱和后綴保持不變。

第二步：

在項(xiàng)目根目錄的vue-config.js文件中配置（vue-cli3默認(rèn)沒有該文件，需要自己手動(dòng)添加）

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

第三步：

重新運(yùn)行項(xiàng)目，并刷新瀏覽器。

現(xiàn)在看到的favicon圖標(biāo)就是我們自己的favicon圖標(biāo)了，如下：

?

ok，完美解決！

?

總結(jié)

以上是生活随笔為你收集整理的vue-cli3项目更改favicon图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。