引言
通常情况下我们都会安装到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方法。