Nuxt构建时调用API并生成静态JSON文件的实现方案

1. 改写Airtable数据获取脚本 #

你现有的脚本是Netlify Functions的处理函数格式，需要改成可直接执行的Node脚本，用来将数据写入本地静态文件。

在项目根目录创建scripts/fetch-airtable-data.js，内容如下：

const fs = require('fs');
const path = require('path');
const Airtable = require('airtable');

// 配置Airtable
Airtable.configure({
  endpointUrl: 'https://api.airtable.com',
  apiKey: process.env.AIRTABLE_KEY
});

const base = Airtable.base('appovakpXJo1fg9nM');
const eventData = [];

// 创建目标目录（如果不存在）
const targetDir = path.join(__dirname, '../static/data');
fs.mkdirSync(targetDir, { recursive: true });
const targetPath = path.join(targetDir, 'experiments.json');

// 从Airtable拉取数据并写入文件
base('Experiments').select({ view: 'Grid view' }).eachPage(
  function page(records, fetchNextPage) {
    records.forEach(record => {
      // 可选：只保留需要的字段，减少文件体积
      eventData.push({
        id: record.id,
        ...record.fields
      });
    });
    fetchNextPage();
  },
  function done(err) {
    if (err) {
      console.error('拉取Airtable数据失败:', err);
      process.exit(1); // 构建失败时终止流程
    } else {
      fs.writeFileSync(targetPath, JSON.stringify(eventData, null, 2));
      console.log(`成功生成静态JSON文件: ${targetPath}`);
      process.exit(0);
    }
  }
);

2. 配置Nuxt构建钩子 #

修改nuxt.config.js，添加构建前的钩子，让脚本在Nuxt构建启动前执行：

const { execSync } = require('child_process');

export default {
  // ... 其他Nuxt配置
  hooks: {
    'build:before'() {
      // 执行数据拉取脚本
      execSync('node scripts/fetch-airtable-data.js', { stdio: 'inherit' });
    }
  }
};

3. 安装依赖 #

确保airtable包已安装到项目：

npm install airtable --save-dev

4. 配置Netlify环境变量 #

在Netlify项目的「Site settings」→「Environment variables」中添加AIRTABLE_KEY，值为你的Airtable API密钥。

5. 验证流程 #

• 本地运行npm run build，检查static/data/experiments.json是否生成，且内容正确。
• 部署到Netlify后，查看构建日志，确认脚本执行成功；应用中可以通过/data/experiments.json路径访问该静态文件（比如用fetch('/data/experiments.json')获取）。

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