微客导航 » 文章资讯 » Vue如何引入远程JS文件

Vue如何引入远程JS文件

2024-02-25 09:16:03 176

问题

最近在使用Vue做东西，用到钉钉扫描登录的功能，这里需要引入远程的js文件，因为Vue的方式跟之前的不太一样，又不想把文件下载到本地应用，找了一下解决的方法，貌似都需要引入第三方的库，最后找到了解决方案，分享之。

思路

一开始的思路是在Vue加载完Dom之后（mounted），使用JavaScript脚本在body中插入远程的脚本文件。

后来发现了Vue的createElement方法，简单的封装一个组件解决问题。

解决方法

第一版代码（直接在操作Dom）如下：

exportdefault{
mounted(){
consts=document.createElement('script');
s.type='text/javascript';
s.src='https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
document.body.appendChild(s);
},
}

使用createElement方法：

exportdefault{
components:{
'dingtalk':{
render(createElement){
returncreateElement(
'script',
{
attrs:{
type:'text/javascript',
src:'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
},
},
);
},
},
},
}

//使用在页面中调用

终极方案

通过封装一个组件remote-js实现：

exportdefault{
components:{
'remote-js':{
render(createElement){
returncreateElement('script',{attrs:{type:'text/javascript',src:this.src}});
},
props:{
src:{type:String,required:true},
},
},
},
}

使用方法：

因为刚开始学习Vue有什么问题欢迎大家指出，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue如何引入远程JS文件

热门推荐

随机推荐