Vue+Electron项目出现ERR_OSSL_EVP_UNSUPPORTED错误求助

一、解决ERR_OSSL_EVP_UNSUPPORTED错误 #

你遇到的问题是Node.js 20.x与Electron 13.6.9的OpenSSL兼容性冲突导致的——Electron 13内置的Node.js版本为14.x，而Node.js 20使用了更新的OpenSSL算法，两者不兼容引发该错误。直接设置NODE_OPTIONS=--openssl-legacy-provider会被Electron拦截，因为Electron不允许该全局参数，可通过以下方案解决：

方案1：切换匹配的Node.js版本 #

使用nvm（Node版本管理器）切换到与Electron 13兼容的Node.js版本（推荐14.x系列）：

• 安装nvm后，执行命令：

  nvm install 14.21.3
  nvm use 14.21.3
  

  之后重新运行yarn electron:serve即可。

方案2：升级Electron版本 #

Electron 13属于旧版本，建议升级到与Node.js 20兼容的版本（如20.x及以上）：

1. 升级依赖：

   yarn add electron@20.3.8 --dev
   

2. 检查vue.config.js或Electron相关配置是否需要适配新版本，之后重新启动服务。

方案3：修改启动命令（绕过Electron参数拦截） #

通过直接给webpack的Node环境传递参数，而非全局设置NODE_OPTIONS：
修改package.json中的scripts：

• Windows：

  "electron:serve": "vue-cli-service electron:serve --openssl-legacy-provider"
  

• macOS/Linux：

  "electron:serve": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service electron:serve"
  

  注：部分版本可能仍存在拦截，优先推荐方案1或2。

二、Vue+Electron实现CRUD的方案 #

CRUD的核心是数据存储与交互，以下是三种常用实现方式：

方式1：本地JSON文件存储（轻量需求） #

适合数据量小、结构简单的场景，直接用Node.js的fs模块读写JSON文件：

1. 在项目中创建data/db.json文件，初始内容：

   {"items": []}
   

2. 在Vue组件中封装CRUD方法（需注意Electron的文件路径差异）：

   const fs = require('fs').promises;
   const path = require('path');
   
   // 确定数据库文件路径（开发/生产环境区分）
   const getDbPath = () => {
     if (process.env.NODE_ENV === 'development') {
       return path.join(__dirname, '../data/db.json');
     }
     return path.join(process.resourcesPath, 'data/db.json');
   };
   
   // 读取数据
   export async function getItems() {
     const data = await fs.readFile(getDbPath(), 'utf8');
     return JSON.parse(data).items;
   }
   
   // 创建数据
   export async function addItem(item) {
     const items = await getItems();
     items.push({ id: Date.now(), ...item });
     await fs.writeFile(getDbPath(), JSON.stringify({ items }, null, 2));
   }
   
   // 更新数据
   export async function updateItem(id, updatedItem) {
     const items = await getItems();
     const index = items.findIndex(i => i.id === id);
     if (index !== -1) {
       items[index] = { ...items[index], ...updatedItem };
       await fs.writeFile(getDbPath(), JSON.stringify({ items }, null, 2));
     }
   }
   
   // 删除数据
   export async function deleteItem(id) {
     const items = await getItems();
     const filteredItems = items.filter(i => i.id !== id);
     await fs.writeFile(getDbPath(), JSON.stringify({ items: filteredItems }, null, 2));
   }
   

3. 在Vue组件中调用这些方法，绑定表单和列表实现交互。

方式2：SQLite数据库（中大型数据需求） #

适合数据量大、需要复杂查询的场景，使用sqlite3库结合Electron IPC通信：

1. 安装依赖：

   yarn add sqlite3 --dev
   

2. 在Electron主进程中初始化数据库并定义IPC handlers：

   const { app, ipcMain } = require('electron');
   const sqlite3 = require('sqlite3').verbose();
   const path = require('path');
   
   // 数据库存储在用户数据目录
   const dbPath = path.join(app.getPath('userData'), 'app.db');
   const db = new sqlite3.Database(dbPath);
   
   // 创建表
   db.run(`CREATE TABLE IF NOT EXISTS items (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     name TEXT NOT NULL,
     description TEXT
   )`);
   
   // IPC：获取所有数据
   ipcMain.handle('crud:getItems', async () => {
     return new Promise((resolve, reject) => {
       db.all('SELECT * FROM items', (err, rows) => {
         err ? reject(err) : resolve(rows);
       });
     });
   });
   
   // IPC：添加数据
   ipcMain.handle('crud:addItem', async (_, item) => {
     return new Promise((resolve, reject) => {
       db.run('INSERT INTO items (name, description) VALUES (?, ?)', 
         [item.name, item.description], 
         function(err) {
           err ? reject(err) : resolve({ id: this.lastID, ...item });
         }
       );
     });
   });
   
   // 同理实现update和delete的IPC handlers
   

3. 在Vue组件中通过ipcRenderer调用主进程方法：

   const { ipcRenderer } = require('electron');
   
   // 获取数据
   async function loadItems() {
     const items = await ipcRenderer.invoke('crud:getItems');
     // 更新Vue组件的data
     this.items = items;
   }
   
   // 添加数据
   async function handleAddItem(item) {
     await ipcRenderer.invoke('crud:addItem', item);
     loadItems();
   }
   

方式3：IndexedDB（前端侧存储） #

适合无需主进程介入、仅在渲染进程中操作的场景，使用localForage简化IndexedDB操作：

1. 安装依赖：

   yarn add localforage
   

2. 在Vue组件中封装CRUD方法：

   import localforage from 'localforage';
   
   // 初始化存储
   localforage.config({
     name: 'AppDB',
     storeName: 'items'
   });
   
   // 获取数据
   export async function getItems() {
     const keys = await localforage.keys();
     return Promise.all(keys.map(key => localforage.getItem(key)));
   }
   
   // 创建数据
   export async function addItem(item) {
     const id = Date.now().toString();
     await localforage.setItem(id, { id, ...item });
     return { id, ...item };
   }
   
   // 更新数据
   export async function updateItem(id, updatedItem) {
     const item = await localforage.getItem(id);
     if (item) {
       await localforage.setItem(id, { ...item, ...updatedItem });
     }
   }
   
   // 删除数据
   export async function deleteItem(id) {
     await localforage.removeItem(id);
   }
   

3. 在Vue组件中直接调用这些方法实现CRUD。

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