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>

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第二次来梳理Vue源码逻辑了。第一次因为不熟悉,梳理的很细致才弄懂。第二次就更有大局观一些了,这次我主要抓住流程的...
    LoveBugs_King阅读 1,771评论 1 5
  • Vue真是太好了 壹万多字的Vue知识点 超详细! 9 ️1⃣️、Vue和其他两大框架的区别 Angular 学习...
    三千繁夢阅读 350评论 0 0
  • vue.js 谁在影响着页面?model中的data Vue.js 官网 api学习步骤引文件写结构初始化js 简...
    Ht_何甜阅读 566评论 0 0
  • 什么是Vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架,(React除了开发网...
    EEEEsun阅读 668评论 0 1
  • Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户...
    桂_3d6b阅读 852评论 0 0