Vue.js中使用fs模块读写本地文件报错及替代方案咨询

一、浏览器端Vue项目（前端） #

浏览器出于安全限制，不允许直接访问本地文件系统，所以fs模块完全不可用，必须用浏览器提供的API实现文件读写：

读取本地文件 #

通过<input type="file">让用户选择文件，再用FileReader读取内容：

<template>
  <input type="file" @change="readLocalFile" accept=".txt">
</template>

<script setup>
const readLocalFile = (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const fileContent = event.target.result;
    console.log(fileContent);
    // 这里可以处理文件内容
  };
  reader.readAsText(selectedFile, 'utf-8');
};
</script>

写入本地文件 #

浏览器无法直接写入本地文件，只能通过生成下载链接让用户手动保存：

// 定义保存文本到文件的函数
const saveTextFile = (content, fileName) => {
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  const downloadUrl = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
};

// 调用示例：保存文本到output.txt
saveTextFile('你要保存的文本内容', 'output.txt');

二、Node.js环境下的Vue项目（如SSR、Electron、后端服务） #

如果你的Vue代码运行在Node.js环境（比如Nuxt.js服务端渲染、Electron主进程、或者后端中的Vue组件），可以正常使用fs模块，但要注意两个点：

1. 必须使用绝对路径读取文件，避免路径解析错误
2. 确保webpack没有将fs模块排除（部分Vue模板默认会在浏览器构建时排除fs，Node环境构建则不会）

示例代码：

import * as fs from 'fs';
import path from 'path';

// 生成文件的绝对路径
const filePath = path.resolve(__dirname, 'sCode.txt');

try {
  const content = fs.readFileSync(filePath, { encoding: 'utf-8' });
  console.log(content);
} catch (error) {
  console.error('读取文件失败:', error.message);
}

为什么你之前的代码报错？ #

你在前端Vue代码中引入fs模块，webpack打包时会将fs替换为一个空的模拟对象（因为浏览器不支持Node.js核心模块），所以readFileSync方法不存在，才会抛出TypeError。

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