需求

vue项目中浏览器页面顶部图标可配置

实现1

使用 vue-head 插件实现

• vue-head 插件可实现 html 文档中 head 标签中的内容动态配置（npm 官网 vue-head 插件）

1. 安装插件

npm install vue-head --save

2. 项目内 main.js 引入

import VueHead from 'vue-head'
Vue.use(VueHead)

3. vue页面使用

我所有页面（所有路由）都用这个图标，因为 vue 项目是 SPA，只有一个页面，所以我在 APP.vue 使用
如果有不同路由展示不同图标的需求，则可在不同路由对应的 vue 文件中单独配置 head。

<script>
import { mapGetters } from "vuex";export default {name: "app",components: {},provide() {return {reload: this.reload};},data() {return {// ...};},computed: {...mapGetters(["theme", 'userInfo', 'sysConfigData']),// ...},methods: {// ...}, mounted() {// ...},// 【主要代码】head 中每一个属性其实代表的就是 head 标签中的 mete标签、link标签、script标签、style标签等等……head: {meta: [// { name: 'application-name', content: 'Name of my application' },// { name: 'description', content: 'A description of the page', id: 'desc' }, // id to replace intead of create element// // ...// // Twitter// { name: 'twitter:title', content: 'Content Title' },// // with shorthand// { n: 'twitter:description', c: 'Content description less than 200 characters'},// // ...// // Google+ / Schema.org// { itemprop: 'name', content: 'Content Title' },// { itemprop: 'description', content: 'Content Title' },// // ...// // Facebook / Open Graph// { property: 'fb:app_id', content: '123456789' },// { property: 'og:title', content: 'Content Title' },// // with shorthand// { p: 'og:image', c: 'https://example.com/image.jpg' },// // ...],// 【主要代码】不能使用 this 会报错 undefined// link: [//   { rel: 'icon', href: require('@/assets/favicon.png'), sizes: '16x16', type: 'image/png' }// ],// 【主要代码】使用thislink() {return [{ rel: 'icon', href: require(`@/assets/${this.sysConfigData['mon.sys.favicon']}.png`), sizes: '16x16', type: 'image/png' }]},script: [// { type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body// // with shorthand// { t: 'application/ld+json', i: '{ "@context": "http://schema.org" }' },// // ...],style: [// { type: 'text/css', inner: 'body { background-color: #000; color: #fff}', undo: false },// // ...]}
};
</script>

实现2

使用原生 js 给图标标签 link 的图片地址 href 重新赋值

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 或 -->
<link id="favicon" rel="icon" href="<%= BASE_URL %>favicon.ico">

// 新的图标地址 iconUrl
document.querySelectAll("link[rel*='icon']").forEach(item => {item.href = iconUrl; // 赋值新的图标地址 iconUrl
})// 或
const dom = document.getElementById("favicon")
dom && (dom.href = iconUrl) // 赋值新的图标地址 iconUrl

其他

npm 官网 vue-head