如何在Vercel托管应用中用vercel.json或Nuxt.js改写查询页URL隐藏参数？

方案一：使用动态路由页面（推荐） #

这是最直接的实现方式，无需额外重写规则，依托Nuxt原生动态路由机制即可完成：

• 在pages目录下创建query/[data].vue文件，将原query.vue的代码迁移至该文件中
• 在组件内通过路由参数获取数据：
  • Nuxt 3：

    <script setup>
    const route = useRoute()
    // 获取URL中的query_data部分
    const queryData = route.params.data
    </script>
    

  • Nuxt 2：

    <script>
    export default {
      data() {
        return {
          queryData: this.$route.params.data
        }
      }
    }
    </script>
    

• 完成后直接访问/query/query_data即可正常展示数据，无需额外配置

方案二：保留原query.vue，配置重写规则 #

若不想修改页面结构，需同时配置Nuxt路由规则与Vercel服务器端重写：

1. Nuxt路由配置 #

• Nuxt 3：在nuxt.config.ts中添加路由规则

  export default defineNuxtConfig({
    routeRules: {
      // 将/query/:data重写为带查询参数的原路径
      '/query/:data': { rewrite: '/query?data=:data' }
    }
  })
  

• Nuxt 2：在nuxt.config.js中扩展路由

  export default {
    router: {
      extendRoutes(routes, resolve) {
        routes.push({
          path: '/query/:data',
          component: resolve(__dirname, 'pages/query.vue'),
          // 将路由参数传递给组件props
          props: route => ({ data: route.params.data })
        })
      }
    }
  }
  

2. Vercel重写配置 #

在项目根目录创建/修改vercel.json，添加服务器端重写与可选的旧URL重定向：

{
  // 可选：将旧的带查询参数的URL永久重定向到新URL，优化SEO
  "redirects": [
    {
      "source": "/query?data=:data",
      "destination": "/query/:data",
      "permanent": true
    }
  ],
  // 核心：将新URL重写为原查询参数格式
  "rewrites": [
    {
      "source": "/query/:data",
      "destination": "/query?data=:data"
    }
  ]
}

3. 组件内兼容获取数据 #

为同时支持旧URL与新URL，可在组件内兼容获取参数：

• Nuxt 3：

  <script setup>
  const route = useRoute()
  const queryData = route.params.data || route.query.data
  </script>
  

• Nuxt 2：

  <script>
  export default {
    data() {
      return {
        queryData: this.$route.params.data || this.$route.query.data
      }
    }
  }
  </script>
  

常见失败原因排查 #

• vercel.json未放置在项目根目录，导致Vercel无法读取配置
• Nuxt路由规则中的路径匹配错误，比如参数名与URL中的对应部分不匹配
• Vercel重写规则顺序错误，redirects需放在rewrites之前才能生效
• 部署后未清除Vercel缓存，可在Vercel控制台手动触发重新部署

内容的提问来源于stack exchange，提问作者Abu Taher Siddik