vue加载远程(网络)js

vue项目中有时候会遇到加载远程（网络）js的情况，常用的方法有以下两种：

1.在index.html中添加

以加载在线的cesium为例

<script src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"></script>

在组件中可以通过window.Cesium来获取加载的js，示例如下：

<template>
  <div id="container">
 </div>
</template>
<script>
const Cesium = window.Cesium

export default {
  data () {
    return {
      viewer: null
    }
  },
  mounted () {
    this.viewer = new Cesium.Viewer('cesiumContainer')
  }
}
</script>

2.定义加载js的组件

在main.js里注册组件

Vue.component('remote-js', {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  render: function (createElement) {
    var self = this
    return createElement('script', {
      attrs: {
        type: 'text/javascript',
        src: this.src
      },
      on: {
        load: function (event) {
          self.$emit('load', event)
        },
        error: function (event) {
          self.$emit('error', event)
        },
        readystatechange: function (event) {
          if (this.readyState === 'complete') {
            self.$emit('load', event)
          }
        }
      }
    })
  },
})
//上面代码一定要在new vue之前
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  render: h => h(App)
})

注意：注册组件一定要在new Vue之前

在组件中使用：

<template>
  <div>
    <remote-js
      src="https://cesium.com/downloads/cesiumjs/releases/1.81/Build/Cesium/Cesium.js"
      @load="jsLoaded"
      @load="jsLoadError"
    />
    <div id="container">
    </div>
 </div>
</template>
<script>
var Cesium = null
export default {
  data () {
    return {
      viewer: null
    }
  },
  mounted () {

  },
  methods: {
    jsLoaded () {
      Cesium = window.Cesium
      this.viewer = new Cesium.Viewer('cesiumContainer')
    },
    jsLoadError () {
    // 加载失败时的操作
    }
  }
}
</script>

这样使用比较灵活还能在加载完成和加载失败时做一些操作。