前端vue2项目引入第三方js文件或者远程js文件并执行相应方法

唯一Chat

发布于 2022-11-16 16:46:05

1.9K0

发布于 2022-11-16 16:46:05

文章被收录于专栏：陶士涵的菜地

啥也不多说，直接上结论

新建一个目录和文件例如：

./tools/load.js

//引入远程js，加载完成后执行相应方法
function loadJs(src) {
  return new Promise((resolve,reject)=>{
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.src= src;
    document.body.appendChild(script);
      
    script.onload = ()=>{
      resolve();
    }
    script.onerror = ()=>{
      reject();
    }
  })
}
 
export default loadJs

在vue文件中使用，这个案例是引用我自己的客服js文件

        mounted: function () {
            loadJs('https://gofly.v1kf.com/static/js/kefu-front.js').then(()=>{
                KEFU.init({
                    KEFU_URL:"https://gofly.v1kf.com",
                    KEFU_KEFU_ID: "taoshihan",
                    KEFU_ENT: "5",
                    KEFU_LANG:"cn",
                    KEFU_SHOW_TYPES:1,
                    KEFU_AUTO_OPEN:false,
                })
            });
        }