electron-vite打包踩坑记录

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、桌面快捷方式更改

目前还没搞明白，后面再记录