Nuxt框架中客户端使用fs包存储API数据作为缓存的异常问题求助

看起来你遇到的核心问题是环境不匹配：fs是Node.js的核心模块，只能在服务端（Node.js运行环境）执行，而你切换页面时的代码大概率是在浏览器客户端运行的——浏览器根本没有fs这个对象，所以会出现空对象的情况。首次加载能运行，应该是因为那时候代码是在服务端渲染（SSR）阶段执行的（比如Next.js、Nuxt.js这类框架的服务端生命周期）。

下面给你几个针对性的解决方案，根据你的项目类型选择：

方案1：把缓存写入逻辑放到服务端API中 #

如果你的项目有服务端（比如用了SSR框架或者自己搭了Node服务），最稳妥的方式是专门写一个服务端接口来处理缓存写入，客户端通过请求这个接口来完成操作，避免在客户端直接调用fs。

示例代码（以Next.js API路由为例） #

首先创建一个服务端API路由来处理缓存：

// pages/api/save-cache.js
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  // 只接受POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ success: false, msg: '仅支持POST请求' });
  }

  try {
    const { cacheKey, data } = req.body;
    // 定义缓存文件路径，确保在项目根目录下的cache文件夹
    const cacheDir = path.join(process.cwd(), 'cache');
    const filePath = path.join(cacheDir, `${cacheKey}.json`);

    // 先创建缓存目录（如果不存在）
    if (!fs.existsSync(cacheDir)) {
      fs.mkdirSync(cacheDir, { recursive: true });
    }

    // 写入JSON数据
    fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
    res.status(200).json({ success: true, msg: '缓存保存成功' });
  } catch (err) {
    console.error('写入缓存失败:', err);
    res.status(500).json({ success: false, msg: '写入缓存失败' });
  }
}

然后在客户端调用这个接口：

// 客户端保存缓存的函数
async function saveApiCache(cacheKey, apiData) {
  try {
    const response = await fetch('/api/save-cache', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        cacheKey: cacheKey, // 比如'home-page-data'
        data: apiData
      })
    });
    const result = await response.json();
    if (result.success) {
      console.log('API数据已缓存到服务器');
    }
  } catch (err) {
    console.error('缓存请求失败:', err);
  }
}

方案2：纯前端项目用浏览器本地存储替代 #

如果你的项目是纯前端（没有服务端），那fs完全无法使用，这时候可以用浏览器提供的存储方案来做缓存：

• localStorage/sessionStorage：适合小体积的JSON数据，操作简单
• IndexedDB：适合大容量数据，支持异步操作

示例：用localStorage做缓存 #

// 保存API数据到localStorage
function saveLocalCache(cacheKey, apiData) {
  try {
    const stringifiedData = JSON.stringify(apiData);
    localStorage.setItem(`api-cache-${cacheKey}`, stringifiedData);
    console.log('数据已保存到本地缓存');
  } catch (err) {
    console.error('保存本地缓存失败:', err);
  }
}

// 读取本地缓存
function getLocalCache(cacheKey) {
  const cachedStr = localStorage.getItem(`api-cache-${cacheKey}`);
  return cachedStr ? JSON.parse(cachedStr) : null;
}

关键注意点 #

• 永远不要在浏览器客户端代码中尝试调用fs模块，浏览器没有这个能力
• 如果是SSR项目，一定要区分服务端生命周期和客户端生命周期，只有服务端代码才能使用fs
• 服务端写入文件时，要注意目录权限和文件覆盖的问题，建议给每个缓存数据设置唯一的key，避免冲突

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