在 VuePress 中可以使用 vue-google-adsense 插件来配置 Google AdSense 广告，这个库可以简化在 VuePress 项目中插入广告的过程。
以下是使用 vue-google-adsense 配置广告的步骤：
1. 安装 vue-google-adsense 库
在你的 VuePress 项目根目录下安装 vue-google-adsense：
npm install vue-google-adsense
2. 配置 VuePress 插件
在 VuePress 项目的 .vuepress/config.js 文件中进行配置。通过 enhanceAppFiles 注入 Adsense 组件。
// .vuepress/config.js
module.exports = {plugins: [['vue-google-adsense',{adClient: 'ca-pub-7393013649146304', // 替换为你的广告客户 IDisNonPersonalizedAds: true, // 可选：是否显示非个性化广告},],],
}
3. 在 VuePress 页面中使用广告组件
在你的 VuePress 页面或 Markdown 文件中使用 Adsense 组件来插入广告：
# 我的页面标题这是页面内容的一部分。<Adsensestyle="display:block"data-ad-client="ca-pub-7393013649146304"data-ad-slot="9716578691"data-ad-format="auto"data-full-width-responsive="true"
/>
在 VuePress 中使用 Google AdSense 时，如果广告没有显示，可能存在以下一些常见问题和解决方案。以下是详细的检查步骤，确保广告能正常显示：
4. 确认 AdSense 账号和广告位的审核状态
- 新账号和广告位审核：Google AdSense 的新账号和广告位通常需要审核一段时间，只有审核通过后广告才会显示。如果是新账号，建议先检查 AdSense 的后台，确保广告位已被批准。
- 广告屏蔽：如果页面流量或内容不符合 AdSense 的政策，广告可能会被屏蔽。确保你的页面内容符合 AdSense 的政策。
5. 确保在 <head> 中加载了 AdSense 脚本
在 VuePress 的 .vuepress/public/index.html 文件的 <head> 标签中，确保正确加载了 adsbygoogle 脚本：
<!-- .vuepress/public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your Site Title</title><!-- AdSense Script --><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7393013649146304"crossorigin="anonymous"></script>
</head>
<body><div id="app"></div>
</body>
</html>
6. 使用 vue-google-adsense 插件并检查配置
确保在 .vuepress/config.js 中正确配置了 vue-google-adsense 插件。检查是否启用了非个性化广告（isNonPersonalizedAds）来提高显示率。
// .vuepress/config.js
module.exports = {plugins: [['vue-google-adsense',{adClient: 'ca-pub-7393013649146304', // 确保这个 ID 正确无误isNonPersonalizedAds: true,},],],
}
7. 插入 <Adsense> 组件并测试广告位置
在 Markdown 文件中插入 <Adsense> 组件，同时尝试在不同位置（如顶部或底部）查看是否显示。
# 示例文章标题一些文章内容。<Adsensestyle="display:block; text-align:center; margin: 20px 0;"data-ad-client="ca-pub-7393013649146304"data-ad-slot="9716578691"data-ad-format="auto"data-full-width-responsive="true"
/>继续其他内容。
8. 在 mounted 钩子中重新触发广告（解决 SPA 中的路由问题）
由于 VuePress 是单页面应用（SPA），广告可能不会在路由切换时自动加载。可以在 mounted 钩子中重新触发广告加载。
在 .vuepress/enhanceApp.js 中添加以下代码：
// .vuepress/enhanceApp.js
export default ({ router }) => {router.afterEach(() => {if (window.adsbygoogle) {(adsbygoogle = window.adsbygoogle || []).push({});}});
};
9. 使用隐私模式或清除缓存测试
有时，浏览器的广告屏蔽插件（如 AdBlock）或隐私模式可能会拦截广告内容。尝试在隐私模式中或禁用广告屏蔽插件后查看广告是否显示。
10. 等待 Google 缓存生效
广告的显示有时需要等待一段时间，因为 Google 可能会缓存广告请求。确保广告配置和代码已经部署到线上环境并等待数小时进行确认。
11. 使用控制台检查是否有错误
打开浏览器开发者工具的控制台，查看是否有相关的错误信息。若存在与 adsbygoogle 相关的错误信息，通常是脚本未加载或配置错误导致的。
经过这些检查后，广告应该能在 VuePress 中成功显示。若仍有问题，可以联系 Google AdSense 支持，确认是否有账号或广告配置方面的问题。
12. 注意事项
- 合法使用广告：在 Google AdSense 中配置的广告客户 ID 和广告位 ID 要符合规范。
- 样式控制：可以通过
style属性控制广告的显示样式。 - 路由重载广告：如果在单页面应用中切换路由，确保广告能在新页面重新加载，可以通过在
mounted钩子中调用(adsbygoogle = window.adsbygoogle || []).push({})。
完成以上步骤后，VuePress 项目中就能成功显示 Google AdSense 广告。
最后vue-google-adsense的链接: https://www.npmjs.com/package/vue-google-adsense
