Vue组件引入外部JS

引言

 

　　通常情况下我们都会安装到node_modules包里面，然后import引入即可，但是难免会有一些js包无法npm安装下载，而且由于更新频繁所以也不会放到npmjs平台。

 

 

方式一：直接在Vue的index.html里面引入，并设置为异步加载

 

<script type="text/javascript" src="https://test.123456.com.cn/recall.min.js" charset="utf-8" async></script>

　　这种方法是在对页面解析的同时，下载js文件，一旦有下载完了，就先停止对页面的解析，执行下载完的那个js文件，当有多个js文件使用async的时候，不能保证执行顺序标签。

　　可见这个方式并不是我们最理想的方式，我们最理想的始终还是按需引入。

 

 

方式二：DOM元素插入（重点推荐）

　　这种方式更方便于封装成方法然后全局调用，文章最后会加上demo。

export default {
    mounted() {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '你的js⽂件地址';
        document.body.appendChild(script);
    },
}

　　

　　我在公司最近的项目就是二次封装SDK来进行视频回溯功能，加上代码大家可以参考：

const connectSDK = (productCode,src) => {
  let dns = window.location.protocol;//请求头
  let root = dns === 'http:' ? 'http://192.168.2.1/api' : 'https://test.123546.com.cn/api';//根据请求头自动切换内网地址和外网地址，这地址是我随便敲的，需要的换成自己的项目地址
  if(!src) src = dns === 'http:' ? 'http://192.168.2.1/sdk.js' : 'https://test.123546.com.cn/sdk.js';

  // 放置这段代码在SDK引入之前
  window.__RECALL_PRODUCT_CODE = productCode;//产品标识
  window.__RECALL_CHANNEL_VAL = "";
  window.__RECALL_REQUEST_ROOT = root;

  let script = document.createElement('script');
  script.type = "text/javascript";
  script.src = scr;
  document.body.appendChild(script);
}

　　这种方式封装好js之后按需引入并调用SDK方法进行回溯录制就可以了，当然还需要设置openSDK和closeSDK的方法来使用，但这里主要讲解按需引入js包；

 

　　其外就是利用import引入和render方法。