其实vue加载远程js的教程很多,但是我比较笨呐。。。用不出来,每次都报方法/属性不存在的错误,来看一下典型的写法:
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '<js地址>';
document.body.appendChild(s);
如果这个能满足你们的需求就不需要看下面了。
其实现在我想做到的是js加载完成后执行我想要执行的代码。
现在用jquery来实现:
首先在assets/js/目录下创建common.js,
然后添加函数:
function loadJs(url,_callback_success,_callback_fail){
var callback_success = function (response) {
console.log("load js success...",response);
}
var callback_fail = function (response) {
console.log("load js fail...",response);
}
_callback_success = _callback_success || callback_success;
_callback_fail = _callback_fail || callback_fail;
$.getScript(url).done(_callback_success).fail(_callback_fail);
}
为了方便调用,可以定义一个结构体:
var API = (function () {
function API() {
}
//加载js的函数
API.prototype.loadJs = function(url,callback){
callback = callback || {};
loadJs(url,callback.success,callback.fail);
}
return API;
})();
export default API;
接下来介绍使用方法:
方法1
- 在webpack.base.conf.js的module.exports/resolve/alias添加:
var webpack = require('webpack')
module.exports = {
...
resolve: {
...
alias: {
....
'API': path.resolve(__dirname, 'assets/js/common')
}
...
},
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
API: 'API',
...
})
]
}
- 在App.vue的create函数直接添加:
...
created() {
let api = new API.default();
window.$api = api;
},
...
这种方法简单粗暴,这样定义的好处是无论在哪里,可以直接使用了:
$api.loadJs("<js地址>",{
success(){
//加载你想要做的事
}
});
方法二
在common文件中定义:
export default{
install(Vue){
Vue.prototype.$api = new API();
}
}
在mian.js中加载:
import api from 'assets/js/common'
Vue.use(api)
于是,只要在使用时加上this.
就行了:
...
this.$api.loadJs(...
...
方法三
可以直接调用,只需要引入方法即可:
<script>
import {loadJs} from '@/assets/js/common.js'
...
created(){
//function loadJs(url,_callback_success,_callback_fail)
loadJs("<js地址>",...
...
}
...
好了,说了这么多,那万一不想用jquery怎么办?这个的确难办,因为本人并未实践过,不过提供一下链接供参考,实现并不难:
写的总体复杂了了些,但是良好的结构很重要,因为
工欲善其事必先利其器