NuxtJS 2静态站点动态页面构建问题：asyncData与请求工具异常

要解决静态站点构建时无法生成动态页面、刷新报错的问题，核心要解决两个点：预生成所有动态路由，以及在asyncData中跨环境正确读取JSON数据。

1. 预生成动态路由（关键） #

静态站点生成（nuxt generate）需要明确所有动态路由才能预渲染对应页面，否则Nuxt无法自动发现这些路由。修改nuxt.config.js，添加generate.routes配置：

首先在文件顶部引入Node.js模块：

const fs = require('fs')
const path = require('path')

然后在export default中添加generate配置：

export default {
  // ... 其他配置
  generate: {
    async routes() {
      // 读取本地JSON文件
      const jsonPath = path.resolve(__dirname, 'static/js/cro-tales.json')
      const croTales = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'))
      // 生成所有动态路由，替换`/comics/:slug`为你的实际页面路径（比如你的动态页是pages/comics/_slug.vue，就写`/comics/${item.fields.Slug}`）
      return croTales.map(item => `/comics/${item.fields.Slug}`)
    }
  },
  // ... 其他配置
}

2. 修改asyncData，跨环境读取JSON数据 #

之前用axios/fetch的问题在于：服务器端（构建时）没有浏览器的URL上下文，相对路径无法正确解析。我们可以通过process.server区分环境，分别处理：

export default {
  async asyncData({ params, process }) {
    let cro_tales

    if (process.server) {
      // 服务器端直接读取本地文件，避免网络请求
      const fs = require('fs')
      const path = require('path')
      // 注意路径：根据页面所在目录调整，比如页面在pages/comics/_slug.vue，这里用`../static`定位到static文件夹
      const jsonPath = path.resolve(__dirname, '../static/js/cro-tales.json')
      cro_tales = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'))
    } else {
      // 客户端用axios请求静态文件，此时相对路径会基于站点域名正确解析
      cro_tales = await this.$axios.$get('/js/cro-tales.json')
    }

    // 用find替代循环，更简洁
    const comic = cro_tales.find(item => item.fields.Slug === params.slug) || {}
    return { comic, cro_tales }
  }
}

为什么之前的方案失效？ #

• axios方案构建失败：开发模式下，请求从浏览器发向dev服务器，相对路径正常；但静态构建时，服务器端执行asyncData时，axios的相对路径没有baseURL，会尝试请求无效地址，导致页面生成失败。
• fetch方案刷新报错：服务器端渲染时，fetch没有浏览器的window.location上下文，相对路径无法解析为有效URL，触发Invalid URL错误。

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