Electron 项目快速构建 与 跨平台 交叉编译

1. 快速搭建 Electron Vite Vue Ts 项目

• 建议使用 yarn 进行扩展包安装

  安装 yarn

  npm install -g yarn
  

  拉取项目扩展

  yarn install
  

• 创建项目

  git 拉取代码

  git clone https://github.com/electron-vite/electron-vite-vue {YourProjectName}
  

  进行 项目扩展拉取后即完成 Electron 搭建 和 Vite Vue 技术栈 搭建

• 交叉编译配置

  在 项目目录下 文件 electron-builder.json5 按照如下配置

  {
    "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
    "appId": "{YourAppId}",
    "asar": true,
    "icon": "{YourBuildAppIcon}", // 此处注意 Mac 端打包可以使用 png 文件 Win 端只支持 ico 文件 否则打包失败
    "artifactName": "${productName}_${os}_${arch}_${version}.${ext}", // 设置打包文件输出文件位置 {项目名称}_{系统OS名称 win 或 mac}_{系统架构}_{编译版本 在project.json中设置}.{后缀名}
    "directories": {
      "output": "release/${version}/${os}" // 打包输出文件夹位置
    },
    "files": [
      "dist-electron",
      "dist"
    ],
    "mac": { // 关于 mac 系统的配置 目前 mac 有两种架构 系统 arm 架构的支持 通过 罗塞塔运行 x64 应用但 x64 不可运行 arm 架构应用
      "target": {
        "target": "dmg",
        "arch": [
          "x64",
          "arm64"
        ]
      }
    },
    "win": { // win 端与 mac 端同理 但 win arm 架构是通过 jit 即时编译运行效率较低如要支持 arm 请单独打包
      icon: "public/favicon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            // "arm64"
          ]
        }
      ],
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    }
  }
  

• 编译指令 可写在 project.json 中之后直接 npm run 即可

  编译 mac 应用

  vue-tsc --noEmit && vite build && electron-builder build --mac
  

  编译 win 应用

  vue-tsc --noEmit && vite build && electron-builder build --win
  

• 关于 mac 平台没有开发者证书编译后无法运行 解决方法

  首次启动应用后会弹窗 此应用身份证书无效 之类的话关闭弹窗后

  在 系统设置 / 隐私与安全中 会有此应用的 仍要打开 按钮点击后一直确定启动就行了

• 完结

  完成以上编译操作后 即可在 项目目录 / release 中获得编译结果