vue修改favicon和浏览器标签title

修改favicon（vue2）

1. 将public目录下的favicon.ico替换为自己的

   有个img目录，反正我删了。

2. 修改vue.config.js文件，没有在根目录中建一个。内容如下：

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

   即可。

修改浏览器标签title

1. main.js中加上这个：

   Vue.directive('title', {
     inserted: function (el) {
       document.title = el.dataset.title
     }
   })
   

2. 在需要该标签的页面，随便找个元素，比如div，加上：

   v-title data-title="你要改的title"
   

   例子：

   

好了，看下效果：

如果title是动态的话，比如博客详情页，title就是博客标题。此时使用以上方式是不行的（v-title :data-title="blog.title"），需要在created生命周期中给title赋值：

document.title = this.blog.title