Electron forge + vite 打包问题整理

尽管使用了"内置电池 - batteries-included"的Electron forge进行打包，依然出现了不少问题并花费大量时间处理，特此记录以便后续查阅。

初始环境

使用了Electron官方推荐的 Electron Forge 创建项目环境(Vite+Ts)模板

npm init electron-app@latest my-new-app -- --template=vite-typescript

创建完成后会得到初始目录

初始目录

之后可根据vite规范创建其他目录/文件，比如/public、.env等

完整目录

多页配置

如要配置多HTML页面可在vite.renderer.config.ts文件中添加，具体内容可参考vite相关文档

多页打包配置

默认情况下，vite会对静态资源进行合并打包（但仅限link/script的href）。如果需要编译后的路径可通过vite插件钩子进行改变，如上图。

环境变量

按照vite文档所描述，可通过import.meta.env方式引用。但是，打包后会出现问题。可通过vite-plugin-environment插件在主进程中直接把环境变量编译为常量

vite.main.config.ts

main.ts(编译前)

main.ts(编译后)

应用配置

在forge.config.ts中可配置应用名称、版本号、资源是否打包等

const config: ForgeConfig = {
  packagerConfig: {
    asar: true,
    appVersion: process.env.APP_VERSION,
    name: process.env.APP_NAME,
    appCopyright: '打包@2024',
    extraResource: ['public/data.db']
  },
...

Typescript配置

在tsconfig.json中可修改TS配置，如添加装饰器支持

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true
  }
}

第三方库

在安装ws 和 better-sqlite3库时都出现了运行时没问题，打包后提示缺少库的问题，下面分别记录不同的解决方案

ws
ws是node中用于websocket的库，可能会提示缺少bufferutil / utf-8-validate库，直接安装即可，安装后的package.json如下
```
  ...
  "optionalDependencies": {
    "bufferutil": "^4.0.8",
    "utf-8-validate": "^5.0.10"
  }
  ...
```
better-sqlite3
用于操作sqlite数据库，该库使用时可能出现多种错误
1. 开发模式下如果提示缺少包，可在主进程配置文件中配置rollup的参数，如
```
...
build: {
    rollupOptions: {
        external: [
            "better-sqlite3"
        ],
    },
}
...
```
1. 如果提示如下信息，可通过 electron-rebuild -f -w better-sqlite3 指令进行重新编译
```
 ...better_sqlite3.node was compiled against a different Node.js version using NODE_MODULE_VERSION xx.
 This version of Node.js requires NODE_MODULE_VERSION xx. Please try re-compiling or re-installing
```
1. 如果上述问题在开发模式下都OK，但在打包后提示无法找到库，则麻烦了。可尝试如下方案（该方案目前测试成功）
  1. 修改引用数据库为require()方法
```
 const Database = require('./better-sqlite3')
```
  1. 可以看到，require的是一个相对地址 —— 没错，需要copy整个目录到public目录下
    
    目录(包含依赖包)
    
    注意，目录中必须包含依赖包。为了减小打包容量，仅安装运行依赖即可
  2. better-sqlite3/build/ 目录下必须包含编译过的node文件
    
    编译文件

资源文件

如果打包时开启了asar包装，主进程会无法访问包内文件，比如db文件。可通过排除文件打包将文件放在资源包外，如下图

包外文件

const config: ForgeConfig = {
  packagerConfig: {
    ...
    //添加配置后data.db不会打包到asar文件中
    extraResource: ['public/data.db']
  },
...

Electron forge + vite 打包问题整理