vue 动态 创建script 加载 js

import Vue from 'vue'

const cerateScriptLoaded = url => {

  return new Promise((resolve, reject) => {

    const script = document.createElement('script')

    script.src = url

    script.onload = function () {

      resolve()

    }

    document.body.appendChild(script)

  })

}

 

const loadedScripts = []

const loadScripts = urls => {

  const diffUrls = urls.filter(item => loadedScripts.indexOf(item) < 0)

  loadedScripts.push(...diffUrls)

  return new Promise(resolve => {

    function doLoad (url) {

      cerateScriptLoaded(url).then(() => {

        if (diffUrls.length > 0) {

          doLoad(diffUrls.shift())

        } else {

          resolve()

        }

      })

    }

    if (diffUrls.length > 0) {

      doLoad(diffUrls.shift())

    } else {

      resolve()

    }

  })

}

Vue.prototype.loadScripts = loadScripts

 

 

// 页面中使用

const outerScripts = [

  baseUrl + '/js/jquery-resize.js',

  baseUrl + '/js/jquery.nicescroll.min.js',

  baseUrl + '/js/assist.js',

  baseUrl + '/js/index.js',

  baseUrl + '/plugins/jquery-jqGrid/jquery.jqGrid.min.js',

  baseUrl + '/plugins/jquery-jqGrid/jqGrid.extends.min.js',

  baseUrl + '/plugins/layer/3.1/layer.js',

  baseUrl + '/plugins/jquery-toastr/toastr.js',

  baseUrl + '/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js',

  baseUrl + '/plugins/echart/echarts.min.js'

]

Vue.prototype.loadScripts(outerScripts).then(() => {

        next()

 })