快捷導(dǎo)航

Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟

更新時間：2023年01月03日 11:18:14 作者：Wisdom0110

vue中網(wǎng)頁圖標(biāo)默認(rèn)使用的是vue自帶的一個icon的圖標(biāo),也是vue的logo,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟,需要的朋友可以參考下

Vue設(shè)置瀏覽器小圖標(biāo)

當(dāng)我們使用瀏覽器做開發(fā)時，我們能希望瀏覽器標(biāo)簽頁能顯示自己的logo小圖標(biāo)，這個是怎樣設(shè)置的呢？

第一步：準(zhǔn)備logo圖片信息

找到自己的logo，通過圖片在線轉(zhuǎn)換格式，轉(zhuǎn)換成32*32的ico為后綴的圖片格式（推薦網(wǎng)站：圖片在線轉(zhuǎn)換工具（aconvert））
如下：

第二步：拷貝ico圖片到項目中

將轉(zhuǎn)換后的ico格式的文件拷貝的vue項目的static目錄下

第三步：添加圖片鏈接到index.html中

找到vue項目根目錄下的index.html文件，在head標(biāo)簽里添加如下內(nèi)容，其中favicon.ico是的拷貝過來的圖片名稱：

<link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow"  rel="external nofollow"   >

也可以在head里設(shè)置瀏覽器小圖標(biāo)右側(cè)的標(biāo)題信息
使用<title></title>標(biāo)簽設(shè)置辯題信息
注意： 這種添加標(biāo)題的方式，僅適用于靜態(tài)標(biāo)題！

附完整的index.html信息，僅供參考：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow"  rel="external nofollow" >
    <title>Activiti</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

到此，Vue設(shè)置瀏覽器小圖標(biāo)的簡單教程已完結(jié)！

這是設(shè)置后的畫面：

完結(jié)展示

補(bǔ)充：修改瀏覽器名字設(shè)置

01.直接修改

這是剛創(chuàng)建最初的樣子

<title>
    <%= htmlWebpackPlugin.options.title %>
</title>

這是直接修改成的名字

 <title>
    xx后臺管理系統(tǒng)
  </title>

02.根據(jù)后端的傳值動態(tài)修改名字

先去axios請求拿到結(jié)果，然后在進(jìn)行修改

document.title = '需要設(shè)置的值'

03.在vue中使用插件的方式

001. npm進(jìn)行安裝

 npm vue-wechat-title --save

002.全局使用，在main.js中引入

 import VueWechatTitle from 'vue-wechat-title' //可以動態(tài)修改瀏覽器標(biāo)題的插件
 Vue.use(VueWechatTitle);

003.在router中的index.js路由下設(shè)置mate屬性

const routes = [
    {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
        title:'關(guān)于'
    }
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
    meta:{
        title:'測試'
    }
  },
]

004.在APP.vue使用vue-wechat-title插件

<router-view v-wechat-title="$route.meta.title"/>

04.路由守衛(wèi)中進(jìn)行修改

router

const routes = [
    {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
        title:'關(guān)于'
    }
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),
    meta:{
        title:'測試'
    }
  },
]

路由守衛(wèi)

router.beforeEach((to, form, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '默認(rèn)標(biāo)題' //此處寫默認(rèn)的title
    }
      next()
})