Nuxt 2 SSG模式下能否将payload.js数据直接嵌入HTML文件？

可以实现把payload.js中的数据直接嵌入生成的HTML文件，替代单独的JSON文件存储，具体方法如下：

实现思路 #

借助Nuxt的generate:page钩子，在每个页面静态生成完成后，读取对应页面的payload.js内容，将其注入到HTML的全局变量中，同时删除冗余的payload.js文件。

具体操作步骤 #

1. 配置Nuxt钩子 #

在项目根目录的nuxt.config.js中添加以下配置，通过钩子处理页面生成逻辑：

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

export default {
  // 保留原有项目配置...
  generate: {
    async page(page) {
      // 拼接当前页面的payload文件路径
      const payloadFilePath = path.join(__dirname, '.nuxt/dist', page.route, 'payload.js')
      // 检查payload文件是否存在
      if (fs.existsSync(payloadFilePath)) {
        // 读取payload文件内容，提取核心JSON数据
        const payloadContent = fs.readFileSync(payloadFilePath, 'utf-8')
        const rawPayload = payloadContent.replace(/^window.__NUXT__=(.*);$/, '$1')
        
        // 将payload数据注入到HTML的body末尾
        page.html = page.html.replace(
          '</body>',
          `<script>window.__NUXT__=${rawPayload};</script></body>`
        )
        
        // 删除单独的payload.js文件
        fs.unlinkSync(payloadFilePath)
      }
    }
  }
}

2. 验证结果 #

执行npm run generate完成站点生成后，检查输出的静态文件：

• 生成的HTML文件底部会包含一个script标签，里面存储了原payload.js的所有数据
• 原本的payload.js文件会被自动删除，不会出现在静态文件目录中

注意点 #

• 该方案要求Nuxt版本在2.14及以上，确保generate:page钩子可用
• 动态路由生成的页面也能被正确处理，钩子会匹配对应路由的payload文件
• 如果payload数据量过大，嵌入HTML会增加页面文件体积，可能影响首次加载性能，需根据实际业务场景评估使用

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