vue項(xiàng)目中有時(shí)候會(huì)遇到加載遠(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里注冊(cè)組件
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)
})
注意：注冊(cè)組件一定要在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 () {
// 加載失敗時(shí)的操作
}
}
}
</script>
這樣使用比較靈活還能在加載完成和加載失敗時(shí)做一些操作诲锹。
