#夏日生活打卡季#

闲暇时间捣鼓了electron24+vite4搭建桌面端应用，踩了不少坑，现记录如下，希望对大家有点点帮助。

框架版本

vite: ^4.3.2
vue: ^3.2.47
electron: ^24.4.0
electron-builder: ^23.6.0

初始化vite4+vue3项目

yarn create vite electron-vite4-vue3
cd electron-vite4-vue3
yarn install
yarn dev

yarn dev运行项目

一个简单的vite4+vue3项目就构建好了。

安装Electron及相关依赖

在构建好的项目中安装一些electron依赖的包。

# 安装electron
yarn add -D electron

# 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序
yarn add -D electron-builder

# 安装electron-devtools-installer 用于开发调试electron
yarn add -D electron-devtools-installer

另外还需要安装一个构建electron的vite插件。

yarn add -D vite-plugin-electron

该插件集成了Vite和Electron，方便在渲染进程中使用Node API或者Electron API功能。

新建主进程文件

在项目根目录新建background.js文件。

const { app, BrowserWindow } = require('electron')
const { join } = require('path')

const createWindow = () => {
    const win = new BrowserWindow({
        // 窗口图标
        icon: join(__dirname, 'resource/shortcut.ico'),
        width: 800,
        height: 600
    })

    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, 'dist/index.html'))
    }
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

在vite.config.js中引入vite-plugin-electron插件，配置主进程入口。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: 'background.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})

还需要在package.json中配置main入口。

{
  "name": "electron-vite4-vue3",
  "private": true,
  "version": "0.0.0",
  "description": "基于Electron24+Vite4.x+Vue3搭建项目框架",
  "author": "andy <282310962@qq.com>",
  "copyright": "MIT License(MIT) ?2023 Andy",
  "main": "background.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "vite --host",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^24.4.0",
    "electron-builder": "^23.6.0",
    "electron-devtools-installer": "^3.2.0",
    "vite": "^4.3.2",
    "vite-plugin-electron": "^0.11.2"
  }
}

到这一步，项目就能运行起来了。

electron-builder打包配置

在项目根目录新建electron-builder.json配置文件。

{
    "productName": "ElectronVite4Vue3",
    "appId": "cc.xiaoyan.electron-vite4-vue3",
    "copyright": "Copyright ? 2023-present Andy",
    "compression": "maximum",
    "asar": true, // 打包格式压缩
    "directories": {
        "output": "release/${version}"  // 打包输出目录
    },
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true,
        "perMachine": true,
        "deleteAppDataOnUninstall": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ElectronVite4Vue3"
    },
    "win": {
        "icon": "./resource/shortcut.ico",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
        "target": [
            {
                "target": "nsis",
                "arch": ["ia32"]
            }
        ]
    },
    "mac": {
        "icon": "./resource/shortcut.icns",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    },
    "linux": {
        "icon": "./resource",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    }
}

运行 yarn electron:build 命令，打包构建项目。

到这里，基于最新版electron+vite4构建跨端项目就分享的差不多了，感兴趣的可以去试试哈~~