Vue.js + Laravel 5.6.7中reCaptcha无法渲染问题求助

咱们先梳理下你当前代码可能存在的几个关键问题，一步步来修复：

1. 修正vue-recaptcha的全局注册方式 #

你在app.js里用了Vue.use(VueRecaptcha)，但这个包本质是Vue组件而非插件，正确的全局注册方式应该直接注册组件：

// app.js
import VueRecaptcha from 'vue-recaptcha';
Vue.component('vue-recaptcha', VueRecaptcha); // 全局注册组件
Vue.component('login', require('./components/login.vue'));

2. 在登录组件中使用正确的组件标签 #

你当前组件里写的<div class="g-recapt...是原生reCaptcha的写法，应该替换成vue-recaptcha封装好的组件标签，记得替换成你的reCaptcha站点密钥：

<template>
  <div>
    <div class="form-group row">
      <div class="col-md-6">
        <!-- 使用vue-recaptcha组件，替换sitekey为你的密钥 -->
        <vue-recaptcha sitekey="你的reCaptcha站点密钥"></vue-recaptcha>
      </div>
    </div>
    <!-- 其他登录表单内容 -->
  </div>
</template>

3. 确保引入Google reCaptcha官方脚本 #

vue-recaptcha依赖Google的官方脚本，有两种引入方式可选：

• 全局引入（推荐）：在你的主Blade模板（比如layouts/app.blade.php）的<body>末尾添加：

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

• 组件自动加载：给组件添加load-script属性，让组件帮你自动加载脚本：

  <vue-recaptcha sitekey="你的站点密钥" :load-script="true"></vue-recaptcha>
  

4. 验证依赖安装与资源编译 #

先确保已经正确安装依赖包，在项目根目录执行：

npm install vue-recaptcha --save

然后重新编译前端资源：

npm run dev # 开发环境
# 生产环境可执行 npm run production

5. 排查控制台错误 #

打开浏览器开发者工具的控制台，查看具体报错：

• 如果提示vueRecaptchaApiLoaded is not defined，检查手动引入的脚本参数里onload=vueRecaptchaApiLoaded是否正确；
• 如果提示站点密钥无效，确认你的密钥正确，且当前域名已添加到Google reCaptcha后台的允许列表中。

按以上步骤调整后，reCaptcha应该就能正常渲染了。

内容的提问来源于stack exchange，提问作者Pankaj