一、搭建 Vue 环境

1. 通过 Vite 构建 Vue：

npm init vite@latest

2. 打开项目并安装好依赖：

npm i

注意： 记得打包之前先将 base 改为 相对路径

3. 打包该项目并进入到 dist 目录中：

npm run build

二、搭建 Electron 环境

1. 创建 package.json

npm init -y

2. 下载 Electron

// 推荐用 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i electron -D

3. 创建并配置 main.js

const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。

const createWindow = () => {
    // 隐藏菜单栏
    Menu.setApplicationMenu(null)

    const win = new BrowserWindow({
        width: 800,
        height: 800,
        icon: path.join(__dirname, 'favicon.ico'), // 以下后缀名都得是 .ico
        webPreferences: {
            devTools: true,

            // 上下文隔离
            contextIsolation: false,
            // 开启后可以调用 Node API 如：对文件操作等等
            nodeIntegration: true
        }
    })

    // 打开 开发者工具
    win.webContents.openDevTools()

    // 加载 index.html
    win.loadFile(path.join(__dirname, 'index.html'))
}

// 关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

//在Electron完成初始化时被触发
app.whenReady().then(() => {
    createWindow()

    // 如果没有窗口打开则打开一个窗口 (macOS)
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

4. 配置 package.json

{
  "name": "electron",
  "version": "1.0.0",
  "description": "ElectronApp",
  "author": "Electron",
  "main": "main.js", // 入口文件
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "productName": "Electron",
    "appId": "Electron",
    "directories": {
      "output": "release/" // 指定Electron打包之后输出的文件夹
    },
    "copyright": "© 2022 Electron",
    "nsis": {
      "oneClick": false, // 创建一键式安装程序还是辅助安装。
      "perMachine": false,
      "deleteAppDataOnUninstall": true, // 仅限一键式安装程序。是否在卸载时删除应用数据。
      "allowToChangeInstallationDirectory": true, // 仅限辅助安装程序。是否允许用户更改安装目录。
      "allowElevation": true,
      "uninstallerIcon": "./favicon.ico",
      "createDesktopShortcut": true, // 是否创建开始菜单快捷方式。
      "createStartMenuShortcut": true, // 是否创建开始菜单快捷方式。
      "shortcutName": "Electron", // 快捷方式的名称。
      "packElevateHelper": true,
      "runAfterFinish": true,
      "menuCategory": true // 在 开始 菜单中以文件夹的形式存放 (对应文件夹名为：上面的属性 authord)
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ]
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ]
    },
    "linux": {
      "icon": "./favicon.ico"
    }
  },
  "devDependencies": {
    "electron": "^21.2.0"
  }
}

nsis 属性的详细介绍： www.electron.build/generated/n…

三、使用 Electron 打包

1. 安装 electron-builder

cnpm install electron-builder -D

2. 测试 electron .

npm run start

注意：右侧的黄色报错，可以在 index.html 中设置成如下

    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline';"
    />

3. 打包 electron-builder

npm run build

四、运行 Electron 应用

目录：

1. 应用安装

进入release：

安装界面：

2. 关于应用

桌面快捷方式：

开始菜单：

控制面板/程序/程序和功能：

相关链接

• Electron官方文档：www.electronjs.org/
• electron-builder官方文档: www.electron.build/