从零到一：在Vite+Vue项目中轻松集成Electron开发桌面应用

环境准备与工具安装

新建项目目录，地址栏清空并输入 cmd，回车，进入控制台界面：在终端依次执行以下命令。如果是第一次使用 Vite创建Vue项目并且未安装过 Vite脚手架的包，则会提示进行vite的安装，输入 Y 等待 Vite包安装完成。

shell 复制代码

npm init vite@latest my-electron-app -- --template vue 
cd my-electron-app 
npm install 
npm run dev

插件安装

electron-builder：用于打包。 electron-devtools-installer：用于在electron应用中进行开发调试；vite-plugin-electron：用于在vite中使用electron。

shell 复制代码

npm install -D electron electron-builder electron-devtools-installer vite-plugin-electron

插件配置

在vite.config.js中引入vite-plugin-electron并配置插件入口

js 复制代码

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: './electron/main.js'
        })
    ]
})

开始

创建入口文件

在根目录下新建一个electron文件夹，用来放electron相关代码。在该文件夹下创建main.js作为入口文件

js 复制代码

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

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 执行createWindow创建窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,// 窗口宽度
        height: 600,// 窗口高度
        title: 'myapp',// 应用标题
        webPreferences: {
            nodeIntegration: true,// 开启node
            contextIsolation: false,// 关闭上下文隔离
            icon: path.join(__dirname, '../public/logo.ico'),// 应用图标
        }
    })
    
    // 引入页面
    // 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'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

配置命令

在package.json中把"type": "module"删除掉（否则会报错require is not defined）并且配置main字段

json 复制代码

{
  "name": "electron-desktop-tool",
  "private": true,
  "version": "0.0.0",
  "main": "./electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vite-plugin-electron": "^0.29.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "electron": "^35.0.2",
    "electron-builder": "^25.1.8",
    "electron-devtools-installer": "^4.0.0",
    "vite": "^6.2.0",
    "vite-plugin-commonjs": "^0.10.4"
  }
}

运行

npm run dev 启动项目

打包

打包配置

使用electron-builder进行打包。先在package.json中配置打包命令和配置打包相关的配置，然后在终端运行命令npm run electron:build。

js 复制代码

"scripts": {
    "electron:build": "vite build && electron-builder"
 },
 "build": {
    "productName": "myElectron",
    "appId": "dyy.dongyuanwai",
    "copyright": "dyy.dongyuanwai © 2024",
    "compression": "maximum",
    "artifactName": "${productName}-v${version}-${platform}-${arch}.${ext}",
    "asar": true,
    "directories": {
      "output": "resource/"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "deleteAppDataOnUninstall": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "myElectron"
    },
    "win": {
      "icon": "./public/logo.ico",
      "target": "nsis"
    },
    "mac": {
      "icon": "./public/logo.ico"
    },
    "linux": {
      "icon": "./public/logo.ico"
     }
},

报错处理

打包报错：Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": EOF。此为electron-builder打包需要的三个关键文件下载失败导致。

在该地址下载以下三个文件winCodeSign-2.6.0.7z、nsis-resources-3.4.1.7z、nsis-3.0.4.1.7z

放入Electron-builder缓存中：一般是在C盘-->用户文件夹-->自己的用户名作为名称的文件夹（例如admin）-->AppData文件夹-->Local-->Electron-builderl-->Cache

winCodeSign-2.6.0.7z：在Cache下新建winCodeSign文件夹，将下载的文件解压后放入

nsis-resources-3.4.1.7z：在Cache下新建nsis文件夹，将下载的文件解压后放入

nsis-3.0.4.1.7z：下载的文件解压后放入nsis文件夹

再次运行命令npm run electron:build，打包文件输出到resource目录，点击exe文件进行安装即可。