目录
一、说明
继上次讲解过 如何正确的安装Electron，并完成vue3+electron的环境搭建 之后再次研究了一下 electron+vite 的打包过程，此篇文章主要用于把打包中所遇到的问题进行记录并把相关的配置进行描述，以下的操作都是基于vue3+vite环境进行操作的，初次研究如有不对的地方欢迎大家进行讨论。
二、下载electron-builder，并配置运行命令
- 在项目目录中使用 npm 进行下载，这里注意该依赖一定是要下载在开发环境中的要不然后续打包的时候会出现报错。
npm install electron-builder -D
- 下载完成之后配置 package.json 在其中添加上这段代码。
"scripts": {
// 这个配置是同时启动vite和electron的如果你没有可以不用写，不懂的看我上篇文章的依赖
"start": "concurrently vite \"electron .\"",
// 以下是打包的启动项
"build:win": "vite build & electron-builder --win",
"electron:build:win": "electron-builder --win",
"build:mac": "vite build & electron-builder --mac",
"electron:build:mac": "electron-builder --mac"
},- 配置完之后直接运行 electron:build:win 你会得到一个大大的红色报错~~ 哈哈哈(我不信你没有报错)
三、electron打包报错问题总结和解决方法
- 那么问题就来了，这里下载的时候我相信大部分人都是下载失败出现了报错，其实这里的报错很明确，就是在你的本地缓存中没有该依赖包，但是去GetHub下载的时候却下载不下来导致的失败问题， 那么既然已经知道问题了，废话不多说直接上方案。
1、根据报错内容下载相关的压缩包
报错一： Get "https://npmmirror.com/mirrors/electron/v33.2.1/electron-v33.2.1-win32-x64.zip": dial tcp: lookup npmmirror.com: no such host
第一个报错大致说的是electron下的electron-v33.2.1-win32-x64.zip没有这个压缩包
解决方法一：
看到上方图片中蓝色的地址链接了吗，如果你在你的报错输出中能直接访问的话，那就直接访问下载地址就自动下载你所需要的版本了。
解决方法二：
首先打开 CNPM Binaries Mirror 链接，往下翻找到对应你当前 electron 的版本号点进去
随后再找到你对应版本号win上的zip，找到之后点击下载就行。
如果你的zip运行成功了那就不需要看了（ps：补充一下如果你下载了这个zip还是不管用，那么还按照这个zip的位置往下翻，找个找个txt文件也下载下来和zip的存放位置一样再试一下）
最后不管你是在哪里下载的 zip 下载完成之后去到你个人的这个目录下面 C:\Users\86184\AppData\Local\electron\Cache 把下载好的压缩包放到此处，然后再次运行你会得到另一个错误。
报错二： Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": dial tcp: lookup github.com: no such host
第二个报错大致说的是 electron-builder下的winCodeSign-2.6.0.7z没有这个压缩包
解决方法一：
看到上方图片中蓝色的地址链接了吗，如果你在你的报错输出中能直接访问的话，那就直接访问下载地址就自动下载你所需要的版本了。
解决方法二：
首先打开 CNPM Binaries Mirror 链接，往下翻找到对应你报错的版本点进去，我这里报错的是winCodeSign-2.6.0版本的
随后再找到你对应版本号7z压缩包，找到之后点击下载就行。
最后不管你是在哪里下载的 7z 下载完成之后去到你个人的这个目录下面 C:\Users\86184\AppData\Local\electron-builder\Cache\winCodeSign 如果没有就创建一个文件夹，然后把刚下载的 7z 放进去并解压到当前文件夹中（带上压缩包的版本号一起解压），最后再次运行一下，你还会得到一个错误。
报错三： Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z": dial tcp: lookup github.com: no such host
第三个报错大致说的是 electron-builder下的nsis-3.0.4.1.7z没有这个压缩包，还是和上面一样的操作
解决方法一：
看到上方图片中蓝色的地址链接了吗，如果你在你的报错输出中能直接访问的话，那就直接访问下载地址就自动下载你所需要的版本了。
解决方法二：
首先打开 CNPM Binaries Mirror 链接，往下翻找到对应你报错的版本点进去，我这里报错的是nsis-3.0.4.1版本的
随后再找到你对应版本号7z压缩包，找到之后点击下载就行。
最后不管你是在哪里下载的 7z 下载完成之后去到你个人的这个目录下面 C:\Users\86184\AppData\Local\electron-builder\Cache\nsis 如果没有就创建一个文件夹，然后把刚下载的 7z 放进去并解压到当前文件夹中（带上压缩包的版本号一起解压），最后再次运行一下，你还会得到一个错误。
报错四：Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z": dial tcp: lookup github.com: no such host
第四个报错大致说的是 electron-builder下的 nsis-resources-3.4.1.7z 没有这个压缩包，还是和上面一样的操作
解决方法一：
看到上方图片中蓝色的地址链接了吗，如果你在你的报错输出中能直接访问的话，那就直接访问下载地址就自动下载你所需要的版本了。
解决方法二：
首先打开 CNPM Binaries Mirror 链接，往下翻找到对应你报错的版本点进去，我这里报错的是nsis-resources-3.4.1 版本的
随后再找到你对应版本号7z压缩包，找到之后点击下载就行。
最后不管你是在哪里下载的 7z 下载完成之后去到你个人的这个目录下面 C:\Users\86184\AppData\Local\electron-builder\Cache\nsis 如果没有就创建一个文件夹，然后把刚下载的 7z 放进去并解压到当前文件夹中（带上压缩包的版本号一起解压），最最最后再次运行一下，应该就不会再报错了
2.、魔法上网（速度贼快）
如果你很快速的翻到了这里，而且还有魔法上网的前置条件的话，那么恭喜你，你很顺利的完成了打包 -.-
3、总结
根据上述流程走完再次打包没有什么报错之后，这次我们换个命令再尝试一下，
这次使用
build:win 的命令进行打包（上文有介绍）
打包完成之后你的根目录中会出现 dist 文件夹，此时发现 vite和electron 打包的文件都在一起了很乱，而且当我们点击预览软件的时候发现软件是一片空白（ps:预览软件在 /dist/win-unpacked/ 软件名.exe 双击打开就是了）为什么呢，那么继续往下看
四、electron和vite的额外打包配置
1、修改vite.config.js
修改了一些基础的vite打包配置
build: {
chunkSizeWarningLimit: 1500, //超出 chunk 大小警告阈值，默认500kb
//Rollup 打包配置
rollupOptions: {
output: {
entryFileNames: "static/js/[name]-[hash:8].js", //入口文件名称
chunkFileNames: "static/js/[name]-[hash:8].js", //引入文件名名称
assetFileNames: "static/[ext]/[name]-[hash:8][extname]", //静态资源名称
},
},
},2、创建electron-builder.yml文件
在项目根目录中创建一个.yml文件并复制以下内容，其他的配置这里不做介绍了这里只用上了常用的，其他配置官方文档都有的。
# 应用 ID 和名称
appId: com.electron.app
productName: 应用名称
# 打包文件的配置
#files:
# # 包含的文件和目录
# - "./dist/**/*"
# - "./src/**/*"
# - "./node_modules/**/*"
# # 排除的文件和目录
# - "!**/*.ts"
# 输出目录配置
directories:
output: "./builder" # 打包输出目录
nsis:
oneClick: false # 是否一键安装
allowToChangeInstallationDirectory: true # 允许修改安装目录
artifactName: ${name}-${version}-setup.${ext} # 安装文件名称
shortcutName: ${productName} # 程序图标名称
uninstallDisplayName: ${productName} # 卸载显示名称
createDesktopShortcut: always
# installerIcon: "./dist/favicon-256.ico" # 安装图标
# uninstallerIcon: "./dist/favicon-256.ico" # 卸载图标
# installerHeaderIcon: "./dist/favicon-256.ico" # 安装时头部图标
# 额外文件
#extraFiles:
# - "./assets/**" # 包含额外的资源文件
# - "./locales/**" # 包含语言包文件
# 打包平台的目标配置
#mac:
# # macOS 相关的打包配置
# category: public.app-category.utilities # macOS 应用分类
# target:
# - dmg # 使用 DMG 格式进行打包
# - zip # 可选：也可以打包为 zip 文件
# icon: "./assets/icons/mac-icon.icon" # macOS 的应用图标
win:
# Windows 相关的打包配置
target:
- nsis # 使用 NSIS 安装程序
icon: "./dist/favicon-256.ico" # Windows 应用图标
signtoolOptions:
publisherName: "发布者名称" # Windows 签名使用的发布者名称
# signingHashAlgorithms: [ "sha256" ] # 签名算法 可以忽略
# certificateFile: "./path/to/your/certificate.pfx" # 证书文件路径
# certificatePassword: "your-certificate-password" # 证书密码
#linux:
# # Linux 相关的打包配置
# target:
# - appImage # 使用 AppImage 格式进行打包
# - deb # 也可以打包为 deb 包
# icon: "./assets/icons/linux-icon.png" # Linux 应用图标
#publish:
# provider: "generic" # 服务器提供商
# url: "http://xxxxx/" # 服务器地址，根据实际情况添加
3、总结
根据上述流程配置完之后再次执行打包 build:win 这次根目录的文件夹就变成两个了
builder：该文件就是electron打包之后的内容，当文件中存在 xxx-1.0.0-setup.exe 的时候就证明你的打包已经完成了，
dist：该文件是vite打包生成出来的，该内容是vue相关的。
五、electron打包完运行白屏问题
1、开发和生产环境electron加载文件出现错误
这个文件主要原因是因为打包的时候没有修改electron的文件加载路径，因为开发环境监听的是vite的开发服务器，而生产环境我们就需要加载vite打包过后本地的index.html文件，
此配置需要写在路径为 electron/main.js中的 createWindow 方法中(ps:详细内容看上一次的文章)
// 是否是打包环境
if (!app.isPackaged) {
// 热更新监听窗口
mainWindow.loadURL("http://localhost:9000");
} else {
// 加载 index.html
mainWindow.loadFile(path.resolve(__dirname, "../dist/index.html"));
}2、修改路由模式
这个问题也是非常的坑人，因为有些人就没有路由配置的问题不知道是因为什么原因引起的，而我这里就需要根据当前环境进行修改 router 的路由模式，
开发环境就需要使用：createWebHistory()
生产环境就需要：createWebHashHistory()
既然已经知道了问题所在那么直接上解决方法
1.首先在项目根目录中创建.env的开发和生产的环境变量
文件1：.env.development 内容如下
VITE_USER_NODE_ENV = 'development'
VITE_NAME = '开发环境'
VITE_API_URL = '/api'
VITE_TARGET = 'http://127.0.0.1:8080'文件2：.env.production 内容如下
VITE_USER_NODE_ENV = 'production'
VITE_NAME = '生产环境'
VITE_API_URL = '/api'
VITE_TARGET = 'https://xxx.com/'2.在 router.js 文件中进行路由模式的创建
const router = createRouter({
history: import.meta.env.VITE_USER_NODE_ENV === "production" ? createWebHashHistory() : createWebHistory(), //路由模式
routes: routers, // 路由地址
});根据上述流程修改完之后再次尝试打包运行应该就没有什么问题了
这期就先这样了，后续还有什么需要改进的我会及时更新的
扫一扫
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
