Electron+Vue3配置-打包

安装 electron-builder

打开终端，执行命令安装：

npm install electron-builder --save-dev

打包配置

修改公共基础路径

修改 vite.config.js 中的 base 选项为 “./”，如下所示：

export default defineConfig({
base: "./"
// ...
});

修改 Electron 配置

修改 electron/main.js 文件中 mainWindow.loadURL 的参数为 vue 打包后的文件路径

// electron/main.js
const path = require("path");
const createWindow = () => {
//...
mainWindow.loadURL(`file://${path.join(__dirname, "../dist/index.html")}`);
};

打包配置

在 package.json 中添加如下配置，可根据需求调整：

{
    "name": "electron_vue3_test",
    "description": "Electron + Vue3 开发桌面应用",
    "author": "author",
    "version": "1.0.0",
    "scripts": {
        // ...
        "electron:build": "npm run build && electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    // ...
    "build":{
        "appId": "your.id",
        "productName": "Electron + Vue3 开发桌面应用",
        "copyright": "Copyright © year ${author}",
        "directories": {
            "output": "app_client"
        },
        "mac": {
            "category": "public.app-category.music",
            "icon": "build/icon.icns",
            "target": [
                {
                    "target": "dmg",
                    "arch": [
                        "x64"
                    ]
                },
                {
                    "target": "zip",
                    "arch": [
                        "x64"
                    ]
                }
            ]
        },
        "win": {
        "icon": "build/icon.ico",
        "target": [
            {
                "target": "nsis",
                "arch": [
                    "x64",
                    "ia32"
                ]
            }
        ]
        },
        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true,
            "installerIcon": "build/icon.ico",
            "uninstallerIcon": "build/icon.ico"
        }
    }
}

打包

打开终端，执行 npm run electron:build 打包，打包后的应用程序在 app_client 目录下。

离线打包报错

访问报错中提供的下载地址，将tar包下载到本地。

如果是windows系统就把tar包放置C:\Users\super123\AppData\Local\electron\Cache