@vue/cli 4.1.1项目注册Google reCAPTCHA时localhost:8080无效如何解决？

架构老林

2026-5-6

解决Google reCAPTCHA本地开发（localhost:8080）的域名注册问题

别担心，这个问题我开发Vue项目时也碰到过，其实解决起来很简单。reCAPTCHA的域名验证规则确实只认纯主机名，但这完全不影响你在带端口的本地环境正常使用它，下面是几个实用的解决办法：

核心方案：注册时仅填写localhost
虽然你开发用的是localhost:8080，但在reCAPTCHA后台注册站点时，只需要输入localhost即可。reCAPTCHA在实际验证时会忽略端口号，只要主机名匹配就会通过。后续在你的Vue项目代码里，正常使用localhost:8080作为开发环境域名完全没问题。
区分开发/生产环境的最佳实践
为了避免开发和生产环境的reCAPTCHA配置混淆，建议在Vue CLI项目中用环境变量来管理密钥：
1. 在项目根目录创建.env.development文件，添加开发环境的站点密钥：
```
VUE_APP_RECAPTCHA_SITE_KEY=你的本地站点密钥
```
2. 创建.env.production文件，添加生产环境的密钥：
```
VUE_APP_RECAPTCHA_SITE_KEY=你的正式站点密钥
```
3. 在组件中通过process.env.VUE_APP_RECAPTCHA_SITE_KEY调用对应环境的密钥，这样本地用localhost注册的密钥，生产用正式域名注册的密钥，互不干扰。
可选：修改Vue CLI默认端口为80
如果你希望完全贴合reCAPTCHA的域名格式，可以把Vue项目的默认端口改成HTTP默认的80端口，这样访问地址就是localhost不带端口。修改方式是在vue.config.js中添加配置：
```
module.exports = {
  devServer: {
    port: 80
  }
}
```
注意：使用80端口在Windows/macOS/Linux可能需要管理员权限，运行项目时可能需要用sudo npm run serve（Mac/Linux）或者以管理员身份打开命令提示符（Windows），这个方法不是必需的，只是提供一个备选思路。