使用 SSR 放大 NUXT 的重定向和重写

Question

我正在尝试在 Amplify 上使用 SSR Nuxt 3 应用程序。

这些是我来自 nuxt.config.ts 的路由规则

routeRules: {
    '/[id]': { ssr: true, cache: { maxAge: 60 } },
    '/': { prerender: true },
    '/plans': { prerender: true },
  }

这是我的构建 yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn build
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

应用程序按预期构建和部署。该页面已启动并正在运行。 如果我访问 mysite.com，然后导航到 /plans（使用导航栏），“计划”页面将按预期可见。如果我使用当前路由 mysite.com/plans 点击刷新，浏览器将无法再找到该页面。

经过 10 多个小时的寻找解决方案后，我发现了我现在讨厌的 Amplify 部分：

我看到有些人使用其他规则，比如这个：

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (rewrite)

但是这个解决方案还有另一个问题：如果我访问 mysite.com/plans，它会自动将我重定向到 mysite.com...

现在怎么办？

Answer 1

您的路线：

/[id]

与

/plans

冲突

如果我使用当前路线点击刷新

mysite.com/plans

，浏览器将无法再找到该页面。

因为Nuxt将

plans

视为id的值，而不是

/plans

路线

---

您必须指定

/[id]

的正则表达式规则

pages/[id].vue

<script lang="ts" setup>
...
definePageMeta({
    validate: (route) => {
        //The `id` must be an integer 
        return /^[1-9]\d*$/u.test(route.params.id.toString());
    }
});
...
</script>