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，完美解決！

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。