Vue中动态加载css、js、字体

1.首先封装三个公用方法

    //动态加载css
    loadStyle(url) {
      var link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = url; //css链接
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(link);
    },
    //动态加载字体
    loadFont(name, url) {
    //name 字体名称
    //url  字体链接
      let style = document.createElement('style');
      style.type = 'text/css';
      style.innerText = '@font-face {font-family:' + name + ';src:url(' + url + ')};font-display: swap';
      document.getElementsByTagName('head')[0].appendChild(style);
    },
    //动态加载js
    loadJs(url) {
      var link = document.createElement('script');
      link.type = 'text/javascript';
      link.src = url; //js链接
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(link);
    },

2.在Vue生命周期mounted中调用公共方法

  mounted() {
    let cssUrl = ''
    let jsUrl= ''
    let fonUrl= ''
    this.loadStyle(cssUrl);
    this.loadJs(jsUrl);
    this.loadFont(fonUrl)
  },

这样就ok了。