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>
这样使用比较灵活还能在加载完成和加载失败时做一些操作。