求助：Vite浏览器环境下readFileSync访问错误的解决方法

问题根源 #

你在浏览器端代码中使用了Node.js专属的fs.readFileSync方法，Vite为了保证浏览器兼容性，会将Node核心模块外部化，浏览器环境本身不存在fs模块，因此会触发这个错误。

分场景解决方案 #

场景1：读取用户上传的本地文件

如果你的src是用户通过文件选择器上传的File对象，必须使用浏览器的File API处理（之前FileReader无效大概率是用法错误）：

// 接收用户上传的File对象，读取并转换
export async function loadXliffFromFile(file: File): Promise<XliffFile> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const xliffContent = e.target?.result as string;
        resolve(xliff12ToJs(xliffContent));
      } catch (err) {
        reject(err);
      }
    };
    reader.onerror = reject;
    reader.readAsText(file);
  });
}

配合文件选择器调用示例：

const fileInput = document.querySelector('input[type="file"]');
fileInput?.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) {
    try {
      const xliffFile = await loadXliffFromFile(file);
      // 处理转换后的xliff文件
    } catch (err) {
      console.error('文件读取失败:', err);
    }
  }
});

场景2：读取服务器静态文件

如果src是服务器上的静态文件路径（比如/assets/translations.xlf），改用浏览器的fetch API获取内容：

export async function loadXliff(src: string): Promise<XliffFile> {
  const response = await fetch(src);
  if (!response.ok) {
    throw new Error(`请求文件失败: ${response.status}`);
  }
  const xliffContent = await response.text();
  return xliff12ToJs(xliffContent);
}

常见误区说明 #

• 浏览器环境没有fs模块，任何导入fs的尝试都会提示"fs未定义"，这是正常的安全限制。
• FileReader不能直接读取本地文件路径字符串，必须传入用户主动选择的File对象（浏览器不允许直接访问本地文件系统路径）。

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