如何在Nuxt中实现URL重写，避免分析工具被广告拦截？

你之前用routeRules只得到重定向，是因为没用到它的代理（重写）能力。Nuxt可以通过两种方式实现类似Next.js的rewrites效果，避免分析工具被广告拦截器识别：

方法一：使用Nuxt routeRules 配置代理（推荐） #

Nuxt的routeRules支持proxy选项，可在服务器端转发请求，不会暴露目标第三方URL。

在nuxt.config.ts中添加以下配置：

// nuxt.config.ts
export default defineNuxtConfig({
  // 配置URL代理规则
  routeRules: {
    // 代理Plausible统计脚本
    '/js/script.js': { proxy: 'https://plausible.io/js/script.js' },
    // 代理事件上报接口
    '/api/event': { proxy: 'https://plausible.io/api/event' }
  },
  // 修改Plausible脚本引入方式
  app: {
    head: {
      script: [
        {
          src: '/js/script.js', // 指向自己域名下的代理路径
          'data-api': '/api/event', // 上报接口也用代理路径
          'data-domain': '你的站点域名',
          defer: true
        }
      ]
    }
  }
})

方法二：手动创建Nitro服务器路由（备选） #

如果routeRules配置有问题，可以通过Nitro的服务器路由手动实现代理：

1. 创建server/js/script.ts文件，代理脚本请求：

// server/js/script.ts
export default defineEventHandler(async (event) => {
  return proxyRequest(event, 'https://plausible.io/js/script.js')
})

2. 创建server/api/event.ts文件，代理事件上报请求：

// server/api/event.ts
export default defineEventHandler(async (event) => {
  return proxyRequest(event, 'https://plausible.io/api/event')
})

3. 同样修改Plausible的脚本引入配置（和方法一中的app.head配置一致）。

验证方式 #

启动Nuxt应用后，访问你的域名下的/js/script.js，如果能正常加载Plausible的脚本内容，说明代理配置生效。此时事件上报会通过你的域名转发，不会被广告拦截器识别为第三方分析工具。

内容的提问来源于stack exchange，提问作者jrob