在使用 Vue 開(kāi)發(fā)項(xiàng)目的時(shí)候經(jīng)常會(huì)用到一些不錯(cuò)的第三方庫(kù)宝剖，但是有一些庫(kù)并沒(méi)有提供 npm 安裝方式餐塘，沒(méi)法使用 import 的方式引入。比如 vaptcha 手勢(shì)驗(yàn)證碼塘慕， vapthca 是一個(gè)使用比較多的第三方手勢(shì)驗(yàn)證碼筋夏，但是官方文檔沒(méi)有找到 npm 安裝的方式。
通常在使用這種第三方庫(kù)的時(shí)候會(huì)在在 index.html 文件中引入第三方庫(kù)提供的 sdk图呢。在 index.html 中引入 vaptcha 是全局使用条篷，會(huì)應(yīng)用到任何組件中，但是實(shí)際僅僅會(huì)在登錄界面（ login.vue ）使用到 vapthca 蛤织。盡管 vaptcha 足夠小赴叹，對(duì)頁(yè)面加載影響小，但是請(qǐng)不要全局引入指蚜。
使用一個(gè)小技巧就可以實(shí)現(xiàn)按需應(yīng)用乞巧，可以創(chuàng)建一個(gè) vaptcha.js ，加入以下代碼：
export function vaptcha () {
return new Promise(function (resolve, reject) {
const tag = document.getElementsByTagName('script')
for (let i of tag) {
if (i.src === 'https://v.vaptcha.com/v3.js') {
resolve(window.vaptcha)
return
}
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://v.vaptcha.com/v3.js'
script.onerror = reject
document.body.appendChild(script)
script.onload = () => {
resolve(window.vaptcha)
}
})
}
然后在 login.vue 中使用 import 引入：
import { vaptcha } from '~/extend/vaptcha'
在 initVaptcha 方法中使用
initVaptcha () {
vaptcha().then((vaptcha) => {
vaptcha({
vid: 'xxxx', // 驗(yàn)證單元id
type: 'invisible', // 顯示類(lèi)型 點(diǎn)擊式
scene: 1, // 場(chǎng)景值 默認(rèn)0
offline_server: 'xxxxx', // 離線模式服務(wù)端地址
container: '#vaptcha-container' // 容器摊鸡，可為Element 或者 selector
}).then((obj) => {
//
})
})
}
這樣就僅會(huì)在 login.vue 中加載 vapthca.js 绽媒，而不會(huì)全局引入。
感謝閱讀免猾，我是 SevDot是辕，全棧開(kāi)發(fā)工程師和終身學(xué)習(xí)者。
不喜勿噴猎提，以人為善获三，比聰明更重要。
個(gè)人博客地址
