vue-cli动态设置favicon和title

favicon是网站的小图标，title分为主副两个标题；

由于favicon和title都是全局的设置，且一次性设置后，除了副标题，其他的都是不需要变动的，所以，在vuex的action获取了一次以后，就不需要重复设置。

设置favicon

 actions:{
    async getData({commit,state}){ 
      if(state.data.nickname) return;
      commit('setLoadingFlag', true)
      const data = await getSettings();
      commit('setData',data);
      commit('setLoadingFlag', false);
      //设置favicon
      if(state.data.favicon){
        var fav = document.querySelector('link[rel="icon"]');
        console.log(fav);
        if(!fav){
          fav = document.createElement('link');
          fav.setAttribute('rel','shortcut icon');
          fav.setAttribute('type','image/x-icon')
          fav.href = state.data.favicon;
          document.head.appendChild(fav);
        }
      }
      //设置title
      if(state.data.siteTitle){
        setTitle.setMainTitle(state.data.siteTitle)
      }

    }
  }

设置主副标题：

思路主标题是在store的action后，副标题是在每一个routes里设置meta的subtitle，然后在router.afterEach设置；

//设置网站标题
let mainTitle = '',
  subTitle = '';

  function concat(a,b){
    if( !a ){
      return b;
    } 
    if(!b){
      return a
    }
    return a + '-' + b;
  }

function resetTitle() {
  var title = document.getElementsByTagName('title')[0];
  if (!title) {
    title = document.createElement('title');
    title.innerText = concat(subTitle,mainTitle);
    document.head.appendChild(title);
  } else {
    title.innerText = concat(subTitle,mainTitle);

  }
}

function setMainTitle(mt) { //主标题
  mainTitle = mt;
  resetTitle();
}

function setSubTitle(st) {//副标题
  
  subTitle = st;
  resetTitle();
}


export default {
  setMainTitle,
  setSubTitle
}

//router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import setTitle  from '@/utils/setSiteTitle';


Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  // base: process.env.BASE_URL,
  routes,
})

router.afterEach((to,from)=>{
  if(to.meta.subTitle){
    setTitle.setSubTitle(to.meta.subTitle)
  }
})

export default router

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      subTitle: '主页'
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( '@/views/About/'),
    meta:{
      subTitle: '关于'
    }


  },
  {
    path: '/project',
    name: 'Project',
    component: () => import( '@/views/Project'),
    meta:{
      subTitle: '项目'
    }
  },
  {
    path: '/message',
    name: 'Message',
    component: () => import( '@/views/Message'),
    meta:{
      subTitle: '消息'
    }
  },{
    path: '/blog',
    name: 'Blog',
    component: () => import( '@/views/Blog'),
    meta:{
      subTitle: '文章'
    }
  },{
    path: '/blog/cate/:categoryId',//动态的路径，语法是 ：id
    name: 'categoryBlog',
    component: () => import( '@/views/Blog'),
    meta:{
      subTitle: '文章'
    }
  },{  
    path: '/blog/detail/:blogId',
    name: 'blogDetail',
    component: ()=> import ("@/views/Blog/components/BlogDetail"),
    meta:{
      subTitle: '文章详情'
    }
  }


]

export default routes;