Electron/Vue应用调用fs.writeFileSync写本地文件报错不存在如何解决

你遇到的fs.writeFileSync is not a function报错，本质是运行环境不匹配：

• 你编写的文件写入代码运行在Vue所属的渲染进程中，新版Electron默认开启contextIsolation、关闭渲染进程的Node集成权限，渲染进程上下文本身不开放Node内置模块访问能力
• 即使单独开启Node集成，Vue项目经过webpack打包时，会自动对fs这类Node内置模块做浏览器端兼容替换，最终拿到的fs是无实际文件系统能力的空壳模块，自然不存在writeFileSync方法
• 你代码里写的相对路径myfile.txt，就算权限和模块可用，生产环境下应用代码被打包进只读的asar压缩包，也会因为目标目录无写权限报错

• 第一步：调整主进程的窗口安全配置，保持安全隔离的前提下搭建通信桥接
  不要直接关闭安全开关，在主进程创建BrowserWindow时保留默认安全配置，指定预加载脚本路径：

  // 主进程入口（main.js/background.js，非Vue组件内代码）
  const { BrowserWindow, app } = require('electron')
  const path = require('path')
  
  const createWindow = () => {
    const win = new BrowserWindow({
      webPreferences: {
        nodeIntegration: false, // 保持关闭，防范远程代码执行风险
        contextIsolation: true, // 保持开启，隔离渲染进程和Node上下文
        preload: path.join(__dirname, 'preload.js') // 指向预加载脚本
      }
    })
  }
  

• 第二步：在预加载脚本中暴露受控的文件写入能力
  预加载脚本运行在隔离上下文，同时具备Node能力，在这里将必要的文件操作方法暴露给渲染进程，不要无限制开放整个fs模块：

  // preload.js
  const { contextBridge, app } = require('electron')
  const fs = require('fs')
  const path = require('path')
  
  contextBridge.exposeInMainWorld('localFileService', {
    writeTextFile: (content) => {
      try {
        // 固定将文件写入到应用专属的用户数据目录，避免只读目录权限报错
        const targetFilePath = path.join(app.getPath('userData'), 'myfile.txt')
        fs.writeFileSync(targetFilePath, content, 'utf-8')
        return { success: true, savedPath: targetFilePath }
      } catch (err) {
        return { success: false, errorMsg: err.message }
      }
    }
  })
  

• 第三步：在Vue组件中调用桥接暴露的方法完成文件写入
  不要在Vue组件内自行引入fs模块，直接调用挂在window上的桥接API即可：

  <script setup>
  // Vue组件内的保存逻辑
  const handleSaveAppResult = () => {
    const writeRes = window.localFileService.writeTextFile('the text to write in the file')
    if (!writeRes.success) {
      alert(`Failed to save the file ${writeRes.errorMsg}!`)
    }
  }
  </script>
  

• 不要为了快速解决问题直接设置nodeIntegration: true、关闭contextIsolation，该配置会大幅提升应用加载恶意远程页面时的代码执行风险
• 不要在渲染进程中直接通过import/require引入fs模块，经过打包后的模块无法访问真实的Node文件系统能力
• 写入本地文件时优先使用Electron提供的app.getPath()获取的系统合法可写目录（如用户数据目录、文档目录），不要使用无兜底的相对路径，避免生产环境下的权限报错

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