NUXT.JS使用GEETEST极验验证

前言

公司新项目为PC版的，本人一直使用VUE，思考了很久最终决定使用nuxt.js完成该项目，因为是PC端可能涉及SEO，nuxt.js就是解决vue单页面SEO的，虽然之前没接触过，但是看了看文档就是对vue的再次封装。项目的注册页要求获取短信验证码前要有个机器验证，所以我采取了geetest

准备

首先要注册geetest,取到一个key，类似百度地图那种的，然后后端要写一个接口返回校验的参数，类似微信分享前的验签。前端需要做的就是把gt.js下载下来，然后引用。我是在nuxt.config.js引入的，如下代码
plugins: [{ src: '~plugins/gt', ssr: false } ],

使用

项目UI是使用vuetifyjs，表单校验是使用vuelidate ，下面是调用的地方

<v-text-field v-model="vcode" :error-messages="vcodeErrors" placeholder="短信验证码" required @input="$v.vcode.$touch()" @blur="$v.vcode.$touch()">