前言

上一章搭建已经搭建好的工程目前只能启动electron桌面端的服务，如果需要启动web端服务的话需要将vite.config.ts中的plugins中的electron插件注释掉。这样非常麻烦，所以并不是我想要的效果。这一章我们将会使用不同的脚本命令启动不同服务，并且实现web端、electron端的项目打包。

一、开发环境web端electron端分离的实现方式优缺点

• 要对electron项目进行web跟electron桌面应用分离，目前我所了解到的方法有两种。

1. 传统方式

环境	web	electron	优点	缺点
dev	"dev":"vite"	"electron:dev": "electron ."	清晰明了、简单易理解。	打包时比较麻烦
build	"build": "vue-tsc --noEmit && vite build"	"electron:build":"vue-tsc --noEmit && vite build && electron-builder"	web端的开发环境、生产环境打包就是一个正常的web项目流程，几乎没有任何学习成本。 electron打包也只需要在web打包命令的基础上添加一个electron-builder命令即可，极其简单。	ts项目中，需要将electron文件中的ts入口文件先进行打包编译，并设置package.json的入口文件为打包编译后的.js文件作为入口文件例：dist/electron/main.js。

2. 使用vue-plugin-electron插件的方式

环境	web	electron	优点	缺点
dev	"dev":"vite"	"electron:dev": "vite --config vite.config.electron.ts"	electron跟web端的配置分离，可针对不同环境编写独立的脚手架文件	需要写两套vite.config配置文件，然后使用vite --config指定配置文件来区分，当业务简单时可能会显得有些冗余
build	"build": "vue-tsc --noEmit && vite build"	"electron:build": "vue-tsc && vite build --config vite.config.electron.ts && electron-builder"	electron跟web端的配置分离，可针对不同环境编写独立的脚手架文件	需要写两套vite.config配置文件，然后使用vite --config指定配置文件来区分，当业务简单时可能会显得有些冗余

• 本章节会使用插件的方式对开发环境跟打包配置详解。

二、web、electron开发环境搭建

我们已经知道当执行pnpm dev命令时会默认读取vite.config.ts文件中的配置信息启动开发服务，此时由于使用了vite-plugin-electron插件。所以就会启动electron的开发环境。 因此我们需要按照以下步骤新增一个electron服务的config文件与web服务的config文件分开管理。

1. 使用vite.chonfig.ts文件复制一份名为vite.config.electron.ts的electron专属配置文件。
2. 删除vite.chonfig.ts中的vite-plugin-electron插件，恢复初始化的样子。
3. 在package.json文件添加命令"electron:dev": "chcp 65001 && vite --config vite.config.electron.ts"

"electron:dev": "chcp 65001 && vite --config vite.config.electron.ts"

1. chcp 65001：解决控制台中文乱码问题。
2. vite --config vite.config.electron.ts：指定vite运行时的配置文件。

• 执行pnpm dev 跟 pnpm electron:dev尝试一下。。

完美！ 注意：传统方式在这就不演示了。感兴趣的同学可以按以下步骤尝试一下。

1. 添加命令"app:dev": "electron ."。
2. 同样将vite.config.ts中的viet-plugin-electron插件删除或注释。
3. 执行pnpm dev 跟 pnpm app:dev尝试一下。

这种方式一定要注意package.json文件中入口文件main属性的值是否正确哦。

三、打包

目前我知道的打包方式共有两种。

1. electron官方提到的electron-forge(我没成功！所以用第二种方式，应该也是大多数vue + electron项目的常用打包方式)
2. 使用electron-builder构建。

1. web端

web端打包直接执行pnpm build进行打包构建，然后将打包结果dist文件夹部署在web服务器即可。

我这里启动了一个本地Nginx并监听80端口来检查打包结果是否正常运行。Nginx知识可自行百度查看即可。

将dist文件夹中的文件放入nginx/html中

在浏览器输入localhost:80访问页面，也是没有问题。

web打包成功！非常的简单。

2. electron桌面端

1. 安装electron-builder依赖。

pnpm add -D electron-builder 

1. 在package.json添加脚本。

"name": "web-electron-template",
"private": true,
"version": "0.0.1",
"main": "dist-electron/main.js",
"scripts": {
            "dev": "vite",
            "build": "vue-tsc --noEmit && vite build",
            "preview": "vite preview",
            "electron:dev": "chcp 65001 && vite --config vite.config.electron.ts",
            "electron:build": "vue-tsc && vite build --config vite.config.electron.ts && electron-builder"
	},
......

1. 在electron/main.ts中配置应用加载路径。

/** electron/main.ts */

import { app, BrowserWindow } from 'electron';
import path from 'node:path';

const createWindow = () => {
	const win = new BrowserWindow({
		width: 960,
		height: 600,
		webPreferences: {
			nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式
			contextIsolation: false, // 设置是否启用上下文隔离模式。
		},
	});

	if (process.env.VITE_DEV_SERVER_URL) {
		win.loadURL(process.env.VITE_DEV_SERVER_URL); // 使用vite开发服务的url路径访问应用
	} else {
		win.loadFile(path.join(__dirname, '../dist/index.html')); // 打包后使用文件路径访问应用
	}
};

app.whenReady().then(createWindow);

1. 在根目录新增一个electron-builder.json文件设置electron-builder打包配置，src文件夹同级。

/** electron-builder.json */

// 暂时先设置这两个配置防止打包后的应用出现的各种问题。（后面解释为什么需要设置）
{
	"files": ["dist/**/*", "dist-electron/**/*"], // 设置需要打包的文件
	"directories": {
		"output": "release" // 设置出口文件
	}
}

1. 执行pnpm electron:build进行打包。

• dist：由vite打包后的产物。
• dist-electron：由vite-plugin-electron插件编译打包后生成的产物(为了将ts文件编译为js文件)。
• release：由electron-builder将dist跟dist-electron合并打包后生成的产物，其中的文件无需关注，目前我们仅关注.exe文件即可。(太多了，有些我也不懂😕！)

---

安装桌面应用

1. 在资源管理器中打开文件夹。
2. 直接双击.exe文件安装 。
3. 完成。

这样就打包安装成功了！

四、使用asar解压工具排查解决打包后的bug

如果是对electron打包后出现bug不知道如何排查，那么这一小节应该能对大家有所帮助。 在学习解决打包后产生的各类bug之前，需要先安装一个.asar压缩文件的解压工具，使用asar解压工具将electron打包后的app.asar解压后查看，方便快速排查解决部分打包文件路径不对造成的bug。

1. 全局安装asar依赖。

pnpm add -g asar

1. 进入release/win-unpacked/resources文件夹

1. 打开终端执行asar extract app.asar ./命令即可查看打包后的文件目录。

1. 使用electron-builder默认配置时导致应用白屏问题

此处我将会删除electron-builder.json配置文件，使用默认配置进行打包测试。 我当前的文件目录结构👇。

🚀直接打包安装。

此时electron-builder就会将打包结果输出到dist文件夹下，双击安装应用后打开，这时候就会发现，当前的应用打开后就白屏了。

这时候先不要慌，选中菜单栏的view选项，打开devTools排查白屏的原因。

此时观察network可以发现，index.html文件请求失败了。

为什么会失败呢？

1. 复制app.asar/dist/index.html前面的文件路径找到app.asar文件的所在目录。
2. 使用asar extract app.asar ./命令解压查看源文件。

这时候就发现app.asar中压根就没有dist文件夹，所以当然就无法找到dist/index.html所以这就是造成白屏的原因。 解决方法：因为打包后的electron/main.ts文件是在dist-electron/main.js中，所以只需要将electron/main.ts中的'../dist/index.html'修改为'../index.html'后再次打包，这样electron的路径就是app.asar/index.html了。

此时electron应用的首页路径就配置正确了，但是你会发现他依旧还是白屏。又是为什么呢🤔？ 如图所示，依旧还是源加载失败了。这次是main.ts😶。

一开始我也非常好奇，为啥会有.ts文件会被加载呢，.ts文件不都已经配置了需要编译再打包嘛。 后来经过不断的排查➕测试，终于让我明白了其中的原因。

1. 首先：检查main.ts资源请求的原因。（发现index.html没有进行编译就打包了）

1. 分析未被解析打包的原因。

由于electron-builder在没有指定要打包的文件时，默认会将整个项目目录作为输入然后打包输出到dist文件夹中。

• 此时就会发生两件事： ①vite打包的dist文件夹被覆盖。 ②electron-builder会将根目录所有文件原封不动的打包解压到app.asar文件中`。

修改vite打包输出文件修改为web-dist后打包分析。

在外部资源管理器打开\dist\win-unpacked\resources并执行asar extract app.asar ./提取源文件。

经过这解压后的源文件进行分析，我们可以发现，整个目录所有文件都被electron-builder默认打包到app.asar中了,得到了证实。不过虽然现在多了很多无用的文件，但如果将electron/main.ts文件的'../index.html'修改为'../web-dist/index.html',使用vite已经打包好的index.html作为electron的首页入口文件。那么此时页面也可以正常显示了🤩🤩！

当然这不是我们的最终解决方案，接下来我们直接通过配置electron-builder的配置来解决这个问题。 electron-builder的打包配置有两种方式。

1. 在package.json中添加"build"属性即可配置electron-builder的打包配置项。
2. 在根目录添加electron-builder.json配置文件添加相关配置

指定electron-builder需要打包的文件

/** electron-builder.json */

{
    "files": ["dist/**/*", "dist-electron/**/*"], // "dist/**/*"表示dist文件夹下的所有目录及文件
    "directories":{
        "output":"release" // 设置出口文件
      }
}

此时electron-builder的打包结果就会输出到release文件夹中了,并且不会将没有用的文件打包到输出结果中了。

此时就只有dist、dist-electron文件夹被打包出来。（node_modules跟package.json我也不知道为什么还会打包出来，此处不深究了。）

最后：为了能顺利打开应用，还需要将electron/main.ts中的文件路径修改一下。

    win.loadFile(path.join(__dirname, '../dist/index.html'));
	// win.loadFile(path.join(__dirname, '../index.html'));
	// win.loadFile(path.join(__dirname, '../web-dist/index.html'));

再次双击.exe文件自动安装打开就可以啦，非常完美🤩🤩。

桌面跟开始菜单也会创建web-electron-template应用的快捷方式。

总结

内容太多太杂乱了，无法总结了！！ 😩😩😩😩 help！！😩😩😩😩 下次一定！

参考文献

• asar文件详解：juejin.cn/post/721317…

• 更多electron-builder的详细知识跟配置可以访问这篇文章学习。非常棒棒。juejin.cn/post/684490…

任务列表

• 搭建electron项目
  • 运行electron桌面端开发环境
  • 运行web浏览器端开发环境
• 打包
• electron通信