# 集成滑动验证码
# 仓库地址
https://github.com/monoplasty/vue-monoplasty-slide-verify (opens new window)
# 用法
参考仓库的介绍即可,用法简单
# 效果
完整内容,请先滑动验证码 👇
# 其他
WARNING
在vuepress应用,部署到Github时,会有点兼容性问题(在构建静态 HTML 时发生了 ReferenceError: document is not defined 的错误)
原因:vue-monoplasty-slide-verify 插件中使用了 document 对象,而 document 仅存在于浏览器环境下,而在服务端渲染 (SSR) 环境下(比如 VuePress 的构建过程),document 是不可用的,这导致了错误。
解决: VuePress 提供了一个 client-only 组件,可以用来包裹那些只在浏览器环境下可用的组件。
你可以在所有使用 SlideVerify 的地方,简单地将它包裹在 client-only 组件中,而不是手动判断 window 对象。
client-only 会确保 SlideVerify 组件只在浏览器环境中渲染,不会在服务端执行时造成错误。
如果你用到的地方很多,可以批量替换原有的 SlideVerify。