Nuxt静态生成为何会将源JSON及JS文件加入构建产物？

你遇到的冗余数据和请求，主要来自两个核心原因：

1. Webpack打包逻辑：如果页面组件中直接用import或require引入本地JSON文件，Webpack会把这个JSON文件编译成客户端模块，打包到_nuxt目录的JS文件中，导致客户端加载时重复获取数据。
2. Nuxt默认的客户端水合机制：静态生成后，Nuxt默认保留客户端水合能力（让页面在客户端可交互），所以会把数据获取逻辑和序列化的数据包含在客户端代码中，即使静态HTML已经渲染完成。

1. 仅在服务端/生成阶段读取JSON #

不要直接在组件中import JSON，改用Node.js的文件系统API在asyncData（Nuxt 2）或useAsyncData（Nuxt 3）钩子中读取数据，这样数据只会在静态生成时被加载，不会被打包到客户端代码：

<!-- pages/[itemName]/index.vue -->
<template>
  <div>{{ item.text }}</div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const fs = require('fs')
    const path = require('path')
    // 读取本地JSON文件
    const rawData = fs.readFileSync(path.resolve(__dirname, '../../data/pageData.json'), 'utf-8')
    const pageData = JSON.parse(rawData)
    const item = pageData.find(i => i.name === params.itemName)
    return { item }
  }
}
</script>

2. 完全禁用客户端水合（无交互页面适用） #

如果你的静态页面不需要任何客户端交互，可以在页面组件中添加hydrate: false配置，这样Nuxt不会加载任何客户端JS，彻底避免冗余请求：

<script>
export default {
  hydrate: false,
  async asyncData({ params }) {
    // 同上的读取逻辑
  }
}
</script>

3. 配置Nuxt静态生成目标 #

确保nuxt.config.js中设置了正确的静态目标：

// nuxt.config.js
export default {
  target: 'static', // Nuxt 2必填，Nuxt 3默认已开启
  generate: {
    // 若需自定义路由生成逻辑，可在此配置
  }
}

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