vue+vite+eclectron如何顺利打包为我们的exe文件？

1.npm下载 electron-builder包

npmx下载复制代码

 npm install electron-builder -D

npm下载不了就使用上一张介绍的cnpm下载

2.配置package.json

配置package.json 复制代码

    {
  "name": "jvhuidesktop",
  "private": true,
  "version": "0.0.1",
  "main": "dist-electron/index.js",
  "author": "你的昵称",
  "description": "简介",
  "scripts": {
    "dev": "vite",
    "build": "vite build && vue-tsc --noEmit && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "electron": "^28.0.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vite-plugin-electron": "^0.15.4",
    "vite-plugin-electron-renderer": "^0.14.5",
    "electron-builder": "^24.9.1",
    "vue-tsc": "^1.8.22"
  },
  "build": {
    "appId": "com.jvhui.desktop",
    "productName": "应用名字",
    "asar": true,
    "directories": {
      "output": "dist-electron"
    },
    "files": [
      "dist-electron/**/*",
      "public/**/*",
      "electron/**/*",
      "dist/**/*",
      "index.html"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false,
      "installerIcon": "public/small_black.ico",
      "uninstallerIcon": "public/small_black.ico",
      "installerHeader": "public/small_black.ico",
      "installerHeaderIcon": "public/small_black.ico",
      "installerSidebar": "public/small_black.ico",
      "uninstallerSidebar": "public/small_black.ico"
    }
  }
}

修改你的package.json下载的scripts打包命令为vite build && vue-tsc --noEmit && electron-builder。
添加electron-builder的打包配置，添加build。
注意output路径为对应electron的入口路径dist-electron。
files 属性允许你定义哪些文件和目录需要被包含进应用程序的分发包中。
nsis配置如下：

json 复制代码

{ 
  // 一键安装程序、或者辅助安装程序（默认是一键安装）
  "oneClick": false,
  // 是否允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序（仅作用于辅助安装程序）
  "allowElevation": true, 
  // 是否允许修改安装目录（仅作用于辅助安装程序）
  "allowToChangeInstallationDirectory": true,
  // 安装程序图标的路径
  "installerIcon": "public/timg.ico",
  // 卸载程序图标的路径
  "uninstallerIcon": "public/timg.ico",
  // 安装时头部图片路径（仅作用于辅助安装程序）
  "installerHeader": "public/timg.ico",
  // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
  "installerHeaderIcon": "public/timg.ico",
  // 安装完毕界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "installerSidebar": "public/installerSiddebar.bmp",
  // 开始卸载界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "uninstallerSidebar": "public/uninstallerSiddebar.bmp",
  // 控制面板中的卸载程序显示名称
  "uninstallDisplayName": "${productName}${version}",
  // 是否创建桌面快捷方式
  "createDesktopShortcut": true,
  // 是否创建开始菜单快捷方式
  "createStartMenuShortcut": true,
  // 用于快捷方式的名称，默认为应用程序名称
  "shortcutName": "TestApp",
  // NSIS 包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作)
  "include": "script/installer.nsi",
  // 用于自定义安装程序的 NSIS 脚本的路径
  "script": "script/installer.nsi",
  // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
  "deleteAppDataOnUninstall": false,
  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
  "runAfterFinish": true,
  // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为 true，则使用公司名称
  "menuCategory": false,
}

3.npm run build

当你执行npm run build的时候，会在你本地的C:/Users/用户名/AppData/local/下的electron和electron-builder下的cache。没有对应的资源包会进行下载。
下载的过程中有可能出现以下错误:

根据错误信息手动下载对应资源包，放入对应的目录即可 registry.npmmirror.com/binary.html...

再运行打包即可

3.electron生产环境调试工具

Debugtron是基于Electron开发的客户端桌面GUI程序，他就是为调试生产环境下的Electron应用而生的。下载地址：github.com/pd4d10/debu...

编写不易，觉得有用可以start，后续遇到什么问题评论区回复~