如何在 Vue 组件中更好的引入一个第三方 JS

SevDot 的个人博客 / 0 / 0 / 创建于 4年前

在使用 Vue 开发项目的时候经常会用到一些不错的第三方库，但是有一些库并没有提供 npm 安装方式，没法使用 import 的方式引入。比如 vaptcha 手势验证码， vapthca 是一个使用比较多的第三方手势验证码，但是官方文档没有找到 npm 安装的方式。

通常在使用这种第三方库的时候会在在 index.html 文件中引入第三方库提供的 sdk。在 index.html 中引入 vaptcha 是全局使用，会应用到任何组件中，但是实际仅仅会在登录界面（ login.vue ）使用到 vapthca 。尽管 vaptcha 足够小，对页面加载影响小，但是请不要全局引入。

使用一个小技巧就可以实现按需应用，可以创建一个 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', // 验证单元id
      type: 'invisible', // 显示类型 点击式
      scene: 1, // 场景值 默认0
      offline_server: 'xxxxx', // 离线模式服务端地址
      container: '#vaptcha-container' // 容器，可为Element 或者 selector
    }).then((obj) => {
      //
    })
  })
}