如何让 Nuxt.js 生成动态路由的静态文件

Question

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署

我选择的是第二种，执行 npm run generate 命令是可以顺利打包的，但是存在问题

-| pages/
---| index.vue
---| users/
-----| _id.vue

上述文件结构，只要有动态路由的文件是打包不出来的，_id.vue 这个文件就无法打包成功，其实官方给了如下配置

// nuxt.config.js 进行设置
const axios = require('axios')

module.exports = {
  generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((user) => {
          return '/users/' + user.id
        })
      })      
    }
  }
}

很可惜，我尝试了，但是失败了，目前项目上线，我改了代码，被迫用 /users?id=1 这样的方式，但是看起来很难受，这并不是我的初衷，如果有人遇到过此问题希望能与我在此交流

Answer 1

樓主好，小妹我照官方文件設置沒有問題，用的是callback route的方式，代碼截圖如下：（少截了一個結尾括號）

成功generate!

官方Dynamic routes

樓主參考看看，希望有幫上忙！

Answer 2

动态路由默认不生成静态文件的吧！
我是这样设置的。

nuxt.config.js

然后动态路由文件中：

Answer 3

动态路由的文件名（即 _id ）实际上是一个变量，在 Restful 风格的路由上它是不唯一的，因此从逻辑上来说不应该打包成静态文件。即便是将这个文件的内容以某种形式打包了，那么这个 id 也需要从 query 或者 body 里查询，那么楼主的方式其实是比较合理的解决方案了。

Answer 4

我也遇到了跟你一样的问题。我知道动态路由无法静态打包。但是官网所给的方式
实际上也是通过axios.get('https://my-api/users')是请求，返回所有id的数组,类似：[{id: 1}, {id: 2}...]
数据量大的话感觉也是很不舒服。不喜欢query传参，但目前我个人觉得打包成静态的文件的话，还是使用query是最好的方式了。
在nuxt.js的issues找到了这个：https://github.com/nuxt/nuxt.... 可以参考
实际上打静态包就放弃了所有服务端渲染的优势，那还不如不用nuxt。既然要服务端渲染 当然选yarn build