Laravel 8+Vue2.6环境下vue-recaptcha不显示不生效问题

组件完全不显示是三个配置错误共同导致的，按以下步骤逐一修复即可正常运行：

1. 修正组件导入语法 #

你使用CommonJSrequire语法导入组件的写法有误，实际注册到Vue的组件值为undefined，模板中的<vue-recaptcha>标签会被浏览器直接解析为未知HTML标签，不会生成任何验证码DOM。
将原有导入代码：

const { VueRecaptcha } = require("vue-recaptcha");

替换为：

const VueRecaptcha = require("vue-recaptcha").default;

如果你的项目构建流程支持ES Module规范，直接使用import VueRecaptcha from 'vue-recaptcha'导入可避免此类模块导出适配问题。

2. 移除手动添加的reCAPTCHA脚本标签 #

vue-recaptcha@2.x版本内置了自动注入官方脚本的逻辑，不需要你在布局模板中手动引入脚本。你手动添加的脚本存在两个致命问题：

• 脚本携带的onload=vueRecaptchaApiLoaded回调是组件内部挂载到window的全局方法，手动引入脚本时，脚本加载完成触发回调的时机远早于组件初始化，会直接抛出vueRecaptchaApiLoaded is not defined的JS错误，阻断所有验证码实例的初始化流程
• 组件自动注入的脚本和你手动引入的脚本重复加载，会导致grecaptcha全局对象状态冲突，所有实例都无法正常渲染
  直接删除layout.blade中的以下代码即可：

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>

特殊场景下必须手动引入脚本的话，请给所有<vue-recaptcha>标签添加:loadRecaptchaScript="false"属性，关闭组件自动注入脚本的逻辑，同时手动引入的脚本不要携带onload参数。

3. 排查基础配置与环境问题 #

完成前两步修复后，仍需确认以下配置正确：

• 将data中的sitekey: 'mykey'替换为你申请的真实reCAPTCHA v2版本站点密钥，无效密钥、密钥和域名不匹配都会导致验证码渲染失败
• 确保当前运行环境可以正常访问reCAPTCHA服务资源，网络不通会导致脚本加载失败，组件无任何显示
• 你模板中同时使用普通重置模式、按钮绑定模式、隐形验证码模式的写法本身不存在语法错误，多实例会被组件自动处理，不需要额外加id或其他配置

修复完成后刷新页面，控制台无JS报错的前提下，普通模式的验证码会直接显示勾选框，重置按钮、按钮绑定触发、隐形验证码提交逻辑都可以正常工作。

内容的提问来源于stack exchange，提问作者Lynette García