electron生成桌面应用程序

试着用electron和electron-builder打包一个桌面应用，之前就想尝试一直下不下来就懒得去研究。正好正常公司有需求逼自己去勤奋一把。
打包完成效果在下一篇文章
一、先创建一个vue项目,下载依赖包，再下载electron和electron-builder打包。

npm init vue

electron和electron-builder我用cnpm安装，npm下载不下来，pnpm下载的打包一直出错。

cnpm electron electron-builder -D

二、创建electron主进程文件,我放在src下面的main.js。

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许在页面中使用节点js
      contextIsolation: false, // 不启用上下文隔离
      enableRemoteModule: true // 允许使用 remote 模块
    },
  });
	if(process.env.NODE_ENV != 'development'){
	     win.loadFile("dist/index.html"); //生产环境
  }else{
	      win.loadURL(`http://localhost:5173`)//开发环境
  }
}

app.whenReady().then(createWindow);

三、配置electron-builder打包配置，在package.json的script里面增加命令,增加build属性和main指向你的electron主进程文件，用相对路径否则打包后白屏。

  ...
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "start": "electron src/main.js", //启动electron服务
    "pack": "electron-builder"  //打包
  },
  "main": "./src/main.js",
  "build": {
    "appId": "com.yourapp.id",
    "productName": "YourAppName",
    "directories": {
      "output": "build"
    },
    "files": [
      "./dist/**/*",
      "./node_modules/**/*",
      "./src/main.js",
      "./index.html",
      "./package.json"
    ],
    "win": {
      "target": "nsis",
      "artifactName": "${productName} Setup ${version}.exe"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "nsis": {
      "oneClick": false, //这个是是否开启一键安装 默认true 不配置双击直接安装
      "allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序
      "allowToChangeInstallationDirectory": true // 这个是否允许修改安装目录
    }
  },

四、打包
打包是基于dist里面的文件打包，所以要先进行build

npm run build

npm run pack

完成生成一个electron的桌面应用
五、错误记录 我开始用pnpm安装electron-builder的时候，打包一直失败 报错如下

查了很多资料，没解决，然后想起来之前用cnpm安装过打包成功过一次，试试删除node_modules,改用cnpm安装，错误消失，完成打包。
六、打包过程中要下载几个包，如果下载不下来可以手动下载，放到文件目录下面去。

https://registry.npmmirror.com/binary.html

winCodeSign-2.6.0.7z
nsis-3.0.4.1.7z
nsis-resources-3.4.1.7z
分别解压放到下面三个位置
C:\Users\Admin\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0
C:\Users\Admin\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
C:\Users\Admin\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
如果打包过程中需要下载electron下载不下来 可以也下载一个electron对应版本
放到下面这个目录，不需要解压
C:\Users\Admin\AppData\Local\electron\Cache\

MLGBZ vscode没有进到项目目录，同时有两个项目，一直在改另外一个项目的配置，搞了一小时一直打包都是白屏

七、一直都是从先npm run dev再新开一个powershell窗口npm run start启动的，可以配置vite插件，监听vite启动，然后spawn唤起electron进程
传送门：满哥教学