Electron 读取本地配置 增加缩放功能（ctrl+scroll）

### 实现 Vue2 和 Electron 读取本地配置文件 为了在基于 Vue2 的 Electron 应用程序中实现读取本地配置文件的功能，可以利用 Node.js 提供的 `fs` 模块来访问文件系统。下面展示了一个简单的方式来进行此操作。 #### 使用 fs 模块读取 JSON 配置文件 由于 Electron 可以直接调用 Node.js API，在主进程中可以通过引入 `fs` 来加载并解析位于应用资源目录下的 JSON 文件作为配置项[^1]： ```javascript // main.js (Electron 主进程) const { app, BrowserWindow } = require('electron'); const path = require('path'); const fs = require('fs'); function loadConfig() { try { const configPath = path.join(app.getPath('userData'), 'config.json'); // 获取用户数据路径下名为 config.json 的文件位置 let rawData = fs.readFileSync(configPath); // 同步方式读取文件内容 return JSON.parse(rawData.toString()); // 将其转换成 JavaScript 对象返回 } catch (err) { console.error(err); throw new Error("Failed to read configuration file"); } } ``` 为了让前端部分能够获取到这些设置信息，可以在创建窗口之前先执行上述函数并将结果传递给渲染线程或者通过 IPC 渠道发送过去。 #### 前端接收配置信息 如果选择后者，则需要定义好通信接口以便于前后端交互；而在前者的情况下可以直接把对象挂载至全局变量上方便组件随时存取: ```html <!-- index.html --> <script> window.configs = null; // 定义一个用于存储配置的地方 if (!process.env.IS_WEB) { // 判断当前环境是不是 Web 平台（即是否处于打包后的桌面环境中） window.addEventListener('DOMContentLoaded', () => { const preloadScript = document.createElement('script'); preloadScript.src = './preload.js'; document.head.appendChild(preloadScript); preloadScript.onload = function () { configs = ipcRenderer.sendSync('get-config'); // 发送同步消息请求配置数据 }; }); } else { // 如果是在浏览器里打开则模拟一些默认参数 window.configs = {}; } </script> ``` 这里假设已经有一个预加载脚本 (`preload.js`) 设置好了必要的权限让网页能发起跨域请求以及使用 nodeIntegration 功能。 #### 创建 Preload 脚本处理逻辑 最后一步就是编写这个中间件用来桥接两个世界之间的沟壑——也就是所谓的 “Preload Script”。它负责监听来自页面的消息并向后台转发查询指令，同时也可反过来向 HTML 页面暴露特定的能力或属性： ```javascript // preload.js const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld( "api", { getConfig: () => ipcRenderer.invoke('get-config') // 注册方法名及其对应的处理器 } ) module.exports = {} ``` 此时再回到最初提到过的主流程代码那里补充一句用来响应此类事件的实际动作即可完成整个闭环设计： ```javascript // 继续上面的例子... app.whenReady().then(() => { ... mainWindow.webContents.on('did-finish-load', async () => { await mainWindow.webContents.executeJavaScript(`configs=${JSON.stringify(loadConfig())};`); }); ipcMain.handle('get-config', async (_event) => { return loadConfig(); }) }); ``` 这样就实现了从启动时自动注入配置直到按需动态拉取最新版本的一套完整的解决方案。