vue+vite+electron项目打包成Mac,Windows安装包

注:创建对应项目

要将使用 Vite 构建的 Vue.js 项目打包为 Windows 和 macOS 平台的可执行文件,可以使用 electron-builder 进行打包。electron-builder 是一个基于 Electron 的构建工具,可以轻松地将应用程序打包成可执行文件和安装程序,支持 Windows、macOS 和 Linux 平台。

1.先安装electron-builder 和 electron 依赖
npm install electron-builder electron --save-dev
2.在 package.json 文件中添加以下脚本: 
"scripts": {
  "build": "vite build && electron-builder",
  "build:win": "vite build && electron-builder --win",
  "build:mac": "vite build && electron-builder --mac"
}

上述代码中,vite build 命令用于构建 Vue.js 应用程序,electron-builder 命令用于将应用程序打包成可执行文件。build 脚本将打包出支持所有平台的应用程序,build:win 脚本将打包出支持 Windows 平台的应用程序,build:mac 脚本将打包出支持 macOS 平台的应用程序。

3.在项目根目录下创建 electron-builder.json 文件,用于配置打包选项:
{
  "productName": "my-app-electron",
  "appId": "com.electron.myapp",
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/**/*",
    "package.json"
  ],
  "extraMetadata": {
    "main": "dist/main/index.js"
  },
  "mac": {
    "target": "dmg",
    "icon": "build/icon.icns"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  }
}


上述代码中,productName 表示应用程序的名称,appId 表示应用程序的唯一标识符,directories.output 表示打包输出目录。files 属性指定需要打包的文件,这里包括 dist 目录下的所有文件和 package.json 文件。extraMetadata 属性指定入口文件的路径,这里是 dist/main/index.js。mac 和 win 属性分别指定打包选项,例如应用程序的图标和目标文件格式。

最后,运行以下命令进行打包:
npm run build:win // 打包 Windows 平台的应用程序
npm run build:mac // 打包 macOS 平台的应用程序
打包完成后,可执行文件会输出到 dist 目录下。

以上是将使用 Vite 构建的 Vue.js 项目打包为 Windows 和 macOS 平台可执行文件的示例代码。需要注意的是,如果你的 Vue.js 项目使用了一些特殊的依赖或功能,可能需要进行额外的配置和处理。