electron-builder解决打包后找不到代码文件、打包指定资源到安装目录的问题

1. 配置files解决打包后找不到代码文件的问题

在开发electron项目时，可能会遇到这种情况：
使用命令 electron . 启动应用，应用正常运行;
使用electron-builder打包，运行打包后的应用程序，出现资源404的情况，应用无法正常运行，如下图：

                                                         无法找到资源资源.png

首先介绍一下我的项目结构：

项目根目录
|  main：electron主进程相关的代码
|   └─── main.js
|   └─── preload.js
|  build：打包后的页面代码
|   └─── index.html
|   └─── js文件、css文件、……略
|   package.json
|   ……略

打包后的应用程序找不到对应文件是因为electron-builder打包时没有包含必要的“项目代码文件”，没有对应的文件自然就404了。
在electron-builder的配置中添加files配置项，包含必要的项目代码文件即可解决：

{
    productName: 'xxx',
    appId: 'xxx',
    files: ['**/*','./main', './build'], // 包含的文件,'**/*' 是当前目录下
}

electron-build打包后的Windows应用程序文件结构如下：

应用程序根目录
|  locales
|   └─── ……略
|  resources
|   └─── app.asar
|  swiftshader
|   └─── ……略
|  应用名.exe
|  ……省略一堆文件

重点看resource文件夹下的app.asar文件，这个文件就是electron-builder打包后的应用入口文件，打开应用时查看console可以看到：

上图请求路径app.asar/build/index.html中的build文件夹就是files中配置的build文件夹；同理，files中配置的main文件夹路径就是app.asar/main。
因此，可以把app.asar这个文件看成打包后项目的“根目录”，electron-builder配置项files中包含的文件都在应用程序根目录/resources/app.asar/目录下。

但是app.asar是一个文件，为什么可以被electron当作一个目录来使用呢？本人使用文本编辑器打开app.asar粗略的看了一下，发现所有files配置项指定的代码文件，都被打包进了app.asar这个文件中。个人猜测当浏览器访问app.asar/xxx时，electron会去app.asar中解析出对应的xxx文件返回给浏览器。

2. 除了files之外，electron-builder还有其它文件相关的配置，可以打包指定文件：

{
    extraFiles: ['filePath'],
    extraResources: ['filePath'],
}

顾名思义，extraFiles为额外文件，extraResources为额外资源，它们的作用就是打包额外的文件；
比如有这么一个需求：在用户没有网络时，为用户提供某个静态文件的下载；那就必须将这个静态文件打包进应用程序，用户下载时使用electron主进程的node程序读取这个文件返回给用户。
或者有和我一样的需求，为支持puppeteer需要将整个chromium浏览器打包进应用程序中。

配置extraFiles后，electron-builder会在打包时将extraFiles中指定的文件复制到打包后应用程序的根目录下(Windows/Linux)，或者Content目录下(MacOS)

配置extraResources后，electron-builder会在打包时将extraResources中指定的文件复制到打包后应用程序的根目录/resources文件夹下(Windows)，或者Content/resources文件夹下(MacOS)

另外，files、extraFiles、extraResources还都支持from-to指定路径的配置方式，具体参见官方文档的相关章节。

3. 打包后的额外文件，在electron主进程中如何获取呢？如何保证开发中和打包后的“额外文件路径”一致呢？

如果你使用的是extraFiles配置项，可以这样做：

• 将“存放额外文件的文件夹”放在项目根目录下；
• 配置extraFiles将“存放额外文件的文件夹”打包到应用程序的根目录，确保“存放额外文件的文件夹”不管是在开发时还是打包后都在根目录下；
• 使用process.cwd()获取Node.js进程当前的工作目录，开发时获取到的是项目根目录，使用electron-builder打包后获取到的是应用程序根目录；
• 有了根目录的路径，直接访问根目录/存放额外文件的文件夹/xxx文件就可以获取对应的文件：

electron-builder配置：
{
    extraFiles: ['./extra-files'],
}

electron主进程：
function getExtraFilesPath(filename: string): string {
    return path.join(process.cwd(), `/extra-files/${filename}`);
}
let filePath = getExtraFilesPath('xxx文件名');

这样无论是在开发中还是打包后都可以获取到正确的文件路径。
如果你使用的是extraResources配置项，也可以使用类似的办法来获取文件。

转载：electron-builder解决打包后找不到代码文件、打包指定资源到安装目录的问题 - 简书