在electron中使用fs模块

一、修改background.js文件

webPreferences: {
      // 是否启用Node integration
      nodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false
      // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.默认为 true
      contextIsolation: false,  // Electron 12 版本之后它将被默认true 
  }

二、引入fs模块改为

const fs = window.require('fs');
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在浏览器环境使用 Node.js 的 fs 模块是不被允许的。因此,如果使用 Electron + Vite + Vue 开发应用程序,需要使用 Electron 提供的 API 来进行文件系统操作。 在 Electron ,可以使用 Node.js 的 fs 模块,因为 Electron 应用程序是基于 Chromium 和 Node.js 构建的。如果需要在 Vue 使用 Electronfs 模块,可以通过 Vue 的插件机制来实现。 首先,在 Electron 主进程添加一个模块来暴露 fs 对象: ```javascript // main.js const { app, BrowserWindow } = require('electron') const fs = require('fs') let mainWindow = null function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }) mainWindow.loadFile('index.html') mainWindow.on('closed', function () { mainWindow = null }) // 将 fs 模块暴露给 Vue 实例 mainWindow.fs = fs } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } }) ``` 然后,在 Vue 的插件使用 fs 对象: ```javascript // fs-plugin.js export default { install: (Vue) => { Vue.prototype.$fs = window.require('electron').remote.getCurrentWindow().fs }, } ``` 最后,在 Vue 应用程序使用插件即可: ```javascript // main.js import Vue from 'vue' import App from './App.vue' import fsPlugin from './plugins/fs-plugin' Vue.use(fsPlugin) new Vue({ render: (h) => h(App), }).$mount('#app') ``` 在 Vue 组件,可以像这样使用 $fs 对象: ```javascript this.$fs.readFile('/path/to/file', (err, data) => { if (err) throw err console.log(data) }) ``` 需要注意的是,读取本地文件需要应用程序有相应的权限,可以在 package.json 文件添加以下配置来获取权限: ```json { "name": "my-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron .", "postinstall": "electron-builder install-app-deps" }, "build": { "appId": "com.example.myapp", "productName": "My App", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "main.js", "package.json" ], "extraResources": [ { "from": "assets", "to": "assets" } ], "dmg": { "contents": [ { "x": 110, "y": 150 }, { "x": 480, "y": 150, "type": "link", "path": "/Applications" } ] }, "mac": { "category": "public.app-category.developer-tools", "icon": "assets/icon.icns" }, "win": { "target": [ "nsis", "msi" ], "icon": "assets/icon.ico" }, "linux": { "category": "Development", "icon": "assets/icon.png" } }, "dependencies": { "electron": "^13.1.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-eslint": "^4.5.0", "@vue/cli-service": "^4.5.0", "babel-eslint": "^10.1.0", "electron-builder": "^22.11.7", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" }, "buildResources": "public" } ``` 在 package.json 文件添加了 "buildResources": "public" 配置,表示将 public 目录下的文件打包到应用程序。如果需要读取 public 目录下的文件,可以使用相对路径来访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值