如何在 VitePress 博客中优雅地接入 Google AdSense 广告：从自动广告到踩坑避雷
我搭建好了基于 VitePress 的 一个机场 - 免费推荐机场 的技术博客，流量也日益增长，经过3个月的奋战，终于在11月27日，通过了GoogleAdSense的审核。 现在是时候接入
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'
}
],
// 验证所有权（可选，但在审核期建议加…
