場景

使用若依的前後端分離版，，其預設的圖示和標題等如下

如果想要修改為自己想要的標題和圖示，實現類似下面的效果

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

首先是下面的Logo的修改，元件的位置layout/Sidebar/Logo.vue

修改其標題的logo的程式碼為

<script>
import logoImg from '@/assets/logo/logo.png'

export default {
  name: 'SidebarLogo
 
',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      title: '公眾號:霸道的程式猿',
      logo: logoImg
    }
  }
}
</script>

上面的title就是顯示的標題，下面的logo就是設定logo的地方。

logo的位置是早assets/logo/logo.png這張圖片。

其大小為60*60畫素大小的png照片

準備一張將其替換掉。

關於標題，為了保持標題的一致性，將下面這些檔案的標題統一進行修改

也可以使用全域性搜搜，搜尋原來的標題，將其全部替換，那麼顯示的兩個標題就更改了。

瀏覽器最上面的圖示的位置在public下的favicon.ico，檔案大小為64*64畫素。

如果有的話直接將其替換，如果沒有的話可以使用一些線上轉換網站等。

比如以下這個網站就可以轉換。

http://www.ico51.cn/