electron-vite打包踩坑记录
大前端已成趋势，用electron开发桌面端应用越来越普遍
近期尝试用electron+vite开发了个桌面应用，electron-vite地址，可用使用vue开发，vite打包，这样就很方便了
但是，我尝试了一下打包，发现各种坑，先记录一下
先看下package.json文件：
{
"name": "easychat",
"version": "1.0.0",
"description": "An Electron application with Vue",
"main": "./out/main/index.js",
"author": "example.com",
"homepage": "https://electron-vite.org",
"scripts": {
"format": "prettier --write .",
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"start": "electron-vite preview",
"dev": "electron-vite dev",
"build": "electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:unpack": "npm run build && electron-builder --dir",
"build:win": "npm run build && electron-builder --win",
"build:mac": "npm run build && electron-builder --mac",
"build:linux": "npm run build && electron-builder --linux"
},
"dependencies": {
"@electron-toolkit/preload": "^3.0.1",
"@electron-toolkit/utils": "^3.0.0",
"@imengyu/vue3-context-menu": "^1.3.8",
"axios": "^1.7.7",
"dplayer": "^1.27.1",
"electron-store": "^8.1.0",
"element-plus": "^2.8.3",
"express": "^4.18.2",
"fluent-ffmpeg": "^2.1.2",
"fs-extra": "^11.2.0",
"js-md5": "^0.8.3",
"moment": "^2.30.1",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^4.1.1",
"rebuild": "^0.1.2",
"sass": "^1.79.1",
"sass-loader": "^13.3.2",
"sqlite3": "^5.1.7",
"v-viewer": "^3.0.11",
"vue-cookies": "^1.8.3",
"vue-router": "^4.2.5",
"ws": "^8.16.0"
},
"devDependencies": {
"@electron-toolkit/eslint-config": "^1.0.2",
"@rushstack/eslint-patch": "^1.10.3",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"asarmor": "^2.0.0",
"electron": "^31.0.2",
"electron-builder": "^24.13.3",
"electron-vite": "^2.3.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.26.0",
"node-gyp": "^10.0.1",
"prettier": "^3.3.2",
"vite": "^5.3.1",
"vue": "^3.4.30"
}
}
打包成Windows下的exe文件命令为npm run build:win
一、certificate has exired or is not vet valid报错
执行打包命令：
npm run build:win
报错如下：
从报错内容上来看，应该是从淘宝镜像下载electron压缩包时报错，报错原因是证书过期了，我看了一下我的镜像设置
镜像设置命令是：
yarn config list
前提是全局安装了yarn命令
当前配置如下：
很明显，electron_mirror地址用的淘宝的，所以需要更改，更改命令如下：
npm config set ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
更改后的配置如下：
再执行打包命令，就不会出现证书过期的问题了
但是，又出现了下面的问题
二、The name of the file cannot be resolved by the system.报错
报这个错让我百思不得其解，从报错的问题来看，报错原因是指向了node_modules，也就是包管理出了问题，因此，我换了个打包工具，用yarn来打包
yarn打包命令：
yarn run build:win
依然报相同的错
于是，我用yarn重新安装了一下包，执行命令：
yarn stall
然后再执行yarn打包命令yarn run build:win
52秒后打包成果，打包出来的exe文件在dist目录下
双击安装后，即可正常使用
三、图标问题
1、任务栏图标
任务栏图标在主进程中修改，按下面配置就行了
2、桌面快捷方式更改
目前还没搞明白，后面再记录
