vue + electron應用文件讀寫操作

Posted on 2022-06-04 by WalkonNet

vue + electron應用文件讀寫

在使用electron制作桌面應用時，基本都會需要數據的存儲。

如果要制作的應用並不復雜，完全可以將數據存儲在本地文件當中，然後應用就可以通過這些文件進行數據的讀寫。

因為electron的主進程是支持node的，所以可以通過fs文件系統對文件完成讀寫操作。

正常操作流程

首先先創建一個vue項目，可以使用vue cli進行創建

通過yarn serve命令測試是否能否運行成功，界面正常出現即可。

通過yarn add electron -D加入electron。然後在package.json同級目錄下創建一個electron_main.js文件，作為electron的主進程。同時也需要設置一下package.json中的main，以及添加"start": "electron ."命令。

在loadURL加載頁面時，因為調試，可以先選擇yarn serve運行起來的頁面
另外在webPreferences需要添加nodeIntegration，否則之後渲染進程中使用require會出現問題
運行yarn start能夠成功打開應用

electron_main.js代碼：

const electron = require('electron');
// 控制應用生命周期的模塊。
const {app, ipcMain} = electron;
// 創建原生瀏覽器窗口的模塊。
const {BrowserWindow} = electron;

let mainWindow;
function createWindow() {
  // 創建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 480, 
    height: 670,
    webPreferences: {
      nodeIntegration: true, 
      contextIsolation: false
    }
  });
  // 加載應用的 index.html。
  // mainWindow.loadURL(`file://${__dirname}/common/index.html`);
  mainWindow.loadURL('http://localhost:9001/');
  // 啟用開發工具
  mainWindow.webContents.openDevTools();
}

// Electron 會在初始化後並準備
app.on('ready', createWindow);
// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
  // 否則絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // 絕大部分應用會重新創建一個窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

在public文件夾下可以創建一個static文件夾，然後創建renderer.js文件，渲染進程的一部分需要調用electron的代碼可以放在這裡。

此js文件要引入public的index.html文件當中

const { ipcRenderer } = require('electron');
window.ipcRenderer = ipcRenderer;

在window中可以創建一個ipcRenderer，用來指向electron中的ipcRenderer。這樣可以讓之後的vue組件中也可以成功調用ipcRenderer。

因為在組件中直接調用require('electron')找不到ipcRenderer，會出現index.js?bdb9:8 Uncaught TypeError: fs.existsSync is not a function報錯，原因：見文末補充介紹

創建一個讀取文件方法readFs.js，和一個數據test.json

讀取方法：

const fs = require('fs')
// 讀取文件方法
function readFile(path){
    return new Promise((resolve, reject)=>{
        fs.readFile(path, { flag: 'r', encoding:'utf-8' }, (err, data) => {
            if (err) { reject('出錯啦'); }
            resolve(data);
        }); 
    })
}

module.exports = { readFile }

測試數據：

[
    {
        "name": "張三",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "李四",
        "age": 47,
        "sex": "boy"
    }
]

然後在electron_main中調用看看：

let con = readFile('./src/assets/fs/test.json')
con.then(res=>{
  console.log(res)
})

發現在控制臺打印時會出現中文亂碼：

解決方法：修改package.json中的start: chcp 65001 && electron .

現在主進程中已經能夠成功讀取文件的數據瞭，那麼如何將此數據傳遞給界面（渲染進程）呢，需要使用到ipcMain和ipcRenderer來進行相互通信。

ipcMain：從主進程到渲染器進程的異步通信，在主進程中
ipcRenderer：從渲染器進程到主進程的異步通信，在渲染進程中，之前已經定義為window.ipcRenderer瞭，地址：www.electronjs.org/zh/docs/lat…

electron_main.js: 使用event.sender.send可以在ipcMain中將數據傳遞到渲染器進程中。

...

// 監聽渲染進程發來的消息
ipcMain.on('render-msg', async (event, arg) => {
  if (arg == '獲取人物信息') {
    let con = await readFile('./src/assets/fs/test.json')
    event.sender.send('person-list', con)
  }
})

...

這裡在vue的組件中使用ipcRenderer先向主進程發送一個獲取人物信息的請求，

效果：

其實關於文件的寫入也是相同，隻不過是渲染進程直接向主進程發送數據即可。

雖然這應該是一個比較簡單的 api 實現，但是在過程上要註意各種配置，否則極容易出現報錯，這時候就要去網上搜索解決方案瞭

補充介紹：Uncaught TypeError: fs.existsSync is not a function錯誤

錯誤代碼

Uncaught TypeError: fs.existsSync is not a function

    at getElectronPath (index.js?bdb9:7)

    at eval (index.js?bdb9:18)

    at Object../node_modules/electron/index.js (chunk-vendors.js:3159)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (reply.js?17a1:1)

    at Module../src/ipc/reply.js (app.js:1145)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)

在 Electron 的Issue #7300中找到瞭解決方案，作為一名 Electron 以及 Web 前端的初學者，自然要在此問題上稍加分析，爭取多瞭解一些背景知識，提高學習質量。

此問題出現的原因為：nodejs 運行時的 require 與編譯時 webpack 的 require 是不同的。默認情況下，window是全局的，然而在 webpack 編譯時會忽略window。

其他的解決方案：使用 preload 方法

mainWindow =new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'    }

  });

在 preload.js 文件中將要使用的模塊引入即可

window.ipcRenderer = require('electron').ipcRenderer;

到此這篇關於vue + electron應用文件讀寫操作的文章就介紹到這瞭,更多相關vue electron文件讀寫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

vue + electron應用文件讀寫操作

目錄