vue項目中有時候會遇到加載遠(yuǎn)程（網(wǎng)絡(luò)）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>

這樣使用比較靈活還能在加載完成和加載失敗時做一些操作。