我搭建好了基于 VitePress 的一个机场 - 免费推荐机场的技术博客，流量也日益增长，经过3个月的奋战，终于在11月27日，通过了GoogleAdSense的审核。
 |
| 一个机场网站通过AdSense审核 |
现在是时候接入 Google AdSense 进行变现了。
虽然 VitePress 生成的是静态网站，但由于其底层是 Vue 的单页应用 (SPA) 机制，且涉及服务端渲染 (SSR)，直接粘贴广告代码往往会遇到“window未定义”报错或者路由切换后广告不加载的问题。
本文记录了我将 AdSense 接入 VitePress 的完整流程，以及一个困扰我很久的 ads.txt 细节问题。
一、 准备工作
在开始之前，你需要：
-
一个通过审核的 Google AdSense 账号。
-
获取你的 发布商 ID (格式如
ca-pub-xxxxxxxxxxxxxxxx)。
二、 方案选择：自动广告 vs 手动单元
VitePress 接入主要有两种流派：
-
全局自动广告：最简单，Google 自动决定在哪里插广告（可能会破坏页面美感）。
-
组件化手动广告：最可控，利用 VitePress 的插槽（Slot），只在侧边栏、文章底部显示。
我建议 两者结合：开启自动广告的锚定功能（底栏），同时在文章底部手动插入横幅。
三、 实施步骤
1. 注入核心代码 (全局配置)
无论哪种方式，都需要先引入 AdSense 的 JS 库。修改 .vitepress/config.mts 文件：
TypeScript
// .vitepress/config.mts
import { defineConfig } from 'vitepress'
export default defineConfig({
// ...
head: [
[
'script',
{
async: '',
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-你的发布商ID',
crossorigin: 'anonymous'
}
],
// 验证所有权（可选，但在审核期建议加上）
[
'meta',
{ name: 'google-adsense-account', content: 'ca-pub-你的发布商ID' }
]
]
})
2. 创建防报错的 Vue 广告组件
为了防止在构建（Build）过程中因为找不到 window 对象而报错，我们需要封装一个 Vue 组件。
在 .vitepress/theme/components/ 下新建 GoogleAd.vue：
代码段
<script setup>
import { onMounted } from 'vue'
const props = defineProps({
slotId: String // 在 AdSense 后台创建的广告单元 ID
})
onMounted(() => {
// 核心逻辑：只在客户端挂载后执行，请求广告
try {
(window.adsbygoogle = window.adsbygoogle || []).push({})
} catch (e) {
console.error('AdSense load error:', e)
}
})
</script>
<template>
<div class="google-ad-container">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-你的发布商ID"
:data-ad-slot="slotId"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
</div>
</template>
<style scoped>
.google-ad-container {
margin: 2rem 0;
text-align: center;
}
</style>
3. 利用 Layout 插槽插入广告
接下来，把这个组件放到文章底部。修改 .vitepress/theme/index.ts：
TypeScript
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import GoogleAd from './components/GoogleAd.vue'
import { h } from 'vue'
export default {
extends: DefaultTheme,
Layout() {
return h(DefaultTheme.Layout, null, {
// doc-after 表示在文章正文结束后，评论区之前
'doc-after': () => h(GoogleAd, { slotId: '1234567890' }), // 换成你的广告单元ID
})
}
}
 |
| 网站底部广告效果 |
四、 踩坑实录：Ads.txt 的 404 之谜
配置完代码后，AdSense 后台一直提示“收益受损风险：您需要修复 ads.txt 问题”。
这里的坑在于：文件位置与文件名大小写。
-
文件位置：
VitePress 的静态资源必须放在 public 文件夹内。
-
错误位置：直接放在项目根目录。
-
正确位置：
.vitepress/public/ads.txt。
这样构建后，它才会出现在
https://yourdomain.com/ads.txt。 -
-
文件名大小写（最容易忽视！）：
我的网站部署在 Cloudflare Pages 上（基于 Linux 环境）。
起初，我创建的文件名是 Ads.txt（首字母大写）。
结果就是：
-
GitHub 仓库里有文件。
-
Cloudflare 部署成功。
-
但是浏览器访问
ygjc.cc/ads.txt报 404 错误！
原因：Linux 系统严格区分大小写。AdSense 只会去爬取全小写的
/ads.txt，而服务器上只有/Ads.txt，所以找不到。ads.txt的文件名一定要小写 解决方法：将文件名重命名为全小写
ads.txt，重新推送部署，问题瞬间解决。 -
五、 总结
在 VitePress 上部署广告并不复杂，关键在于：
-
SSR 适配：用
onMounted确保广告代码仅在客户端运行。 -
规范放置：静态文件必须进
public目录。 -
细节决定成败：
ads.txt必须全小写。
希望这篇实战记录能帮到同样在使用 VitePress 的你！
