如何在使用nuxt部署后添加新的动态路由？

Question

我使用带有动态路由的nuxt generate在AWS上部署了我的网站。页面上没有问题。现在，我要添加新路由，而不需要整个部署过程。

这里是一个例子：

/post/1
/post/2
/post/3
------- already deployed and works fine ------
/post/4 <- want to add after deployment

我手动上载了在index.html上生成的S3，因此我可以像/post/4/index.html一样访问文件，但是如果尝试/post/4，它会显示使用/post/_id.vue创建的页面。

我认为路由没有更新。 （我不知道/dist文件夹上的路由规则是什么）

没有整个部署过程就可以上传新的动态路由吗？

Answer 1

发布时出错。

amplify publish // it publish vue application. it means that the target is SPA not Static page webiste

我在S3上部署了文件，并且工作正常。

我尝试过访问以下网站。我也失败了。

https://aws.amazon.com/ko/blogs/mobile/deploy-files-s3-dropbox-amplify-console/

我想与nuxt generate一起使用amplify。

错误的问题，没有正确的答案。

Answer 2

我认为您需要在部署之前生成每个页面。缺省情况下，generate命令会忽略动态路由。

转到nuxt.config.js并找到生成密钥。这是生成特定站点的简单示例。

export default {
  ...
  generate: {
    routes: [
      '/post/1',
      '/post/2',
      '/post/3',
      '/post/4'
    ]
  }
}

如果需要以编程方式生成动态路由，则需要编写一个函数。

检查文档以获取更多信息：https://nuxtjs.org/api/configuration-generate/

最后是一个简单的例子：

import BlogService from './services/BlogService.js'
...
export default {
  ...
  generate: {
    routes: () => {
      return BlogService.getPosts().then(response => {
        return response.data.map(post => {
          return '/post/' + post.id
        })
      })
    }
  }
}