# miao-electron-pure

**Repository Path**: ling1314/miao-electron-pure

## Basic Information

- **Project Name**: miao-electron-pure
- **Description**: miao-electron-pure
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-07
- **Last Updated**: 2026-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 20260123 electron 路线搁置，理由如下：
1. 打包出来的文件体积太大，基本都是400M+，作为小巧工具定位来说它不适合。大型项目可以考虑。wails 只有它十分一的体积。
2. 跨平台性没有想象中的那么好，例如 better-sqlite的交叉编译问题，openDevTools() 在linux 上无法打开开发者工具等问题
3. pure-admin 工程骨架有点复杂，很多功能我用不到，做不到随心所欲
4. 标准做法下项目也是前后端分离的，通过 preload 关联调用，这和wails 差别不大。但是 相比较而言 wails 类型约束比node好，也可能是我比较习惯go。
5. 个人积累，wails 下的前端骨架是我自己搭建的，pure-admin 可以快速上手但是没有完全掌控。自己写项目本来就是为了积累，全部自己写比较合适。有ai 加持，完全可以将 pure-admin 中觉得好的搬到自己项目中。  



### 快速开始
```sh
# 安装 yarn，
# yarn 相比 npm 更加友好，下载速度快，yarn.lock更严格。yarn 和 npm 操作相识，但是尽量不要混用。
npm install -g yarn
# 安装依赖
yarn install
# 桌面端
yarn dev
# 浏览器端
yarn browser:dev
# 桌面端
yarn build
# 浏览器端
yarn browser:build
# 配置镜像源
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/
```
### 添加路由
系统分为静态路由和动态路由两种。
静态路由，项目会自动加载 /src/router/modules 下的.ts文件，remaining.ts 是默认路由。
动态路由，修改 get-async-routes 的返回值就行，尽量按接口格式返回数据。
### 单元测试
node 下有非常友好的单元测试依赖，例如 vitest ,和vite 深度绑定。
***先做个标记，有时间了在研究。***
这里先用简单测试
```sh
# 安装 tsx, tsx 是一个运行时，正常情况下ts 需要预编译后才能运行，tsx 可以一步完成。
yarn add -D tsx
# 创建一个简单的测试ts文件，例如 simple.ts
# 在package.json 中添加测试脚本，
# "test:simple": "tsx electron/main/dao/__tests__/simple_test.ts"
# 执行测试
yarn test:simple
```

### 异步暴漏方法
electron 分为主进程和渲染进程，主进程是"后台管理者",只有一个，有完整的node环境，有访问完整的系统权限；渲染进程是"前台展示者"，可以有多个，等同于浏览器环境，只有受限的浏览器沙箱环境。
暴漏方法需要两步
```ts
// main.ts 暴露操作
ipcMain.handle('logs-find-all', async () => {
  try {
    const logs = logsDao.findAll();
    return logs;
  } catch (error) {
    console.error('Error in logs-find-all:', error);
    throw error;
  }
});

// preload.ts 作为桥梁，将安全的 API 暴露给渲染进
miaoApi: {
  findAll: () => ipcRenderer.invoke('logs-find-all'),
}

// 页面使用
const li = await (window as any).ipcRenderer.miaoApi.findAll();
```
早期的 electron 主进程中的 api 是可以被渲染进程直接调用的，但是这样不安全。从electron 12 开始，默认是不允许直接暴漏方法，必须通过预加载脚本作为桥梁。现在都 37 了，不用留恋旧版本不安全的做法了。

### 错误处理
#### 1. yarn 安装依赖时提示 0A00010B:SSL routines:ssl3_get_record:wrong version number
```sh
error C:\02demo\electron-pure-admin\node_modules\electron: Command failed.
Exit code: 1
Command: node install.js
Arguments:
Directory: C:\02demo\electron-pure-admin\node_modules\electron
Output:
RequestError: write EPROTO 5C520000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355:

    at ClientRequest.<anonymous> (C:\02demo\electron-pure-admin\node_modules\got\dist\source\core\index.js:970:111)
    at Object.onceWrapper (node:events:639:26)
    at ClientRequest.emit (node:events:536:35)
    at origin.emit (C:\02demo\electron-pure-admin\node_modules\@szmarczak\http-timer\dist\source\index.js:43:20)
    at emitErrorEvent (node:_http_client:101:11)
    at TLSSocket.socketErrorListener (node:_http_client:504:5)
    at TLSSocket.emit (node:events:524:28)
    at emitErrorNT (node:internal/streams/destroy:169:8)
```
解决办法，设置国内镜像
```sh
# 1. 先设置yarn镜像
yarn config set registry https://registry.npmmirror.com/
yarn config set electron_mirror "https://npmmirror.com/mirrors/electron/"

# 2. 清理并重新安装
yarn cache clean
rmdir /s /q node_modules
yarn install
```

#### 2. better_sqlite3.node err
错误信息如下：
![alt text](doc/img/4ad9e51a118656915b7c243cd6ed3071.png)
这说明你安装 better-sqlite3 时使用的 Node.js 版本与 Electron 内置的 Node.js 版本不匹配。
Electron 内置一个完整的 node环境，当使用 simple.ts 运行测试时，连接本地数据文件使用的是你自己安装的本地 node环境。  
而 yarn dev 运行时，使用的是 Electron 内置的 node环境。像 better-sqlite3 这类包含原生 C++ 代码的模块，需要针对特定的 Node.js 版本编译，此时运行时使用的 Node.js 版本必须与 Electron 内置的 Node.js 版本一致。  
解决办法是使用 `electron-rebuild` 重建原生模块
```sh
# 安装 electron-rebuild
yarn add --dev electron-rebuild

# 清理并重新安装依赖（可选）
rm -rf node_modules
yarn install

# 重建原生模块
yarn electron-rebuild
```

#### 3.交叉编译时提示  mksquashfs": file does not exist 
```sh
• application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/linux
  ⨯ cannot execute  cause=exec: "C:\\Users\\Administrator\\AppData\\Local\\electron-builder\\Cache\\appimage\\appimage-12.0.1\\linux-x64\\mksquashfs": file does not exist
                    command='C:\Users\Administrator\AppData\Local\electron-builder\Cache\appimage\appimage-12.0.1\linux-x64\mksquashfs' 'C:\00miao\miao-electron\release\6.2.0\__appImage-x64' 'C:\00miao\miao-electron\release\6.2.0\electron-pure-admin_6.2.0.AppImage' -offset 188392 -all-root -noappend -no-progress -quiet -no-xattrs -no-fragments
                    workingDir=C:\00miao\miao-electron\release\6.2.0\__appImage-x64
error Command failed with exit code 1.
```
这是因为 electron 在  Windows 上交叉编译 Linux 安装包时默认使用 mksquashfs 将打包文件压缩成 deb 包，但是 mksquashfs 在 Windows 上没有安装或者无法运行导致的错误。
windows 上可以选择使用 wsl 安装子系统来打包，但是我不建议这么搞。
推荐方法 
1. `electron-builder --linux tar.gz` 指定 将文件打包为 tar，这种方式用于快速验证，压缩包需要自行解压或者在linux上 通过 dpkg 自行打包。
2. 直接在linux 上编译，这种方式最准确，避免原生依赖问题。最终定稿版本推荐这样做。