使用 electron28 + vue3 +vite4 搭建窗体项目

这是一个使用 Electron28 + Vue 3 + Vite4 创建的项目

起步 - 搭建 electron+vue3+vite4 项目

# 创建项目，项目名为 electron-vite4-vue3
yarn create vite electron-vite4-vue3

# 进入\打开项目
cd electron-vite4-vue3

# 初始化项目
yarn install 或者 yarn 

# 运行vite4-vue3项目
yarn dev

1. 在你的项目工作目录下打开命令行窗口shift + 鼠标右键，选择在此处打开Powershell窗口，执行 yarn create vite electron-vite4-vue3，其中 electron-vite4-vue3是项目名称，框架选择 Vue 框架,开发语言选择自己喜欢的，我这里使用的是 JavaScript

√ Select a framework: » Vue
√ Select a variant: » JavaScript
2. 用 VSCODE 打开此项目
3. 新建终端执行 yarn 或者 yarn install
4. 上述步骤完成后继续执行 yarn dev，运行项目，看是否可成功

5. 项目创建成功

安装 Electron 及依赖

重新新建终端依次执行一下命令:

# 安装electron
yarn add -D electron

# 安装electron-builder 用于打包程序
yarn add -D electron-builder

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

# 构建electron程序的vite插件
yarn add -D vite-plugin-electron

# 安装electron程序的升级插件
yarn add electron-updater

# 安装electron日志插件 
yarn add electron-log

# 安装electron图标ICON处理插件
yarn add electron-icon-builder

或者快速批量安装依赖

# 安装electron，electron-builder，electron-devtools-installer，vite插件
yarn add -D electron electron-builder electron-devtools-installer vite-plugin-electron 

# 安装electron程序的升级插件，electron日志插件
yarn add electron-updater electron-log

# 安装electron图标ICON处理插件
yarn add electron-icon-builder

注意

安装electron-icon-builder插件时，可能会出现安装报错的情况，如下所示，这时只要根据错误提示去Downloading所示链接https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip 下载下来放到Saving to所示目录 C:\Users\OAO\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip 后，重新执行 yarn add electron-icon-builder 即可.

PS D:\ViteProject\ett> yarn add electron-icon-builder
yarn add v1.22.21
[1/4] Resolving packages...
warning electron-icon-builder > icon-gen > svg2png > phantomjs-prebuilt@2.1.16: this package is now deprecated
warning electron-icon-builder > icon-gen > svg2png > phantomjs-prebuilt > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning electron-icon-builder > icon-gen > svg2png > phantomjs-prebuilt > request > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is 
known to be problematic.  See https://v8.dev/blog/math-random for details.
warning electron-icon-builder > icon-gen > svg2png > phantomjs-prebuilt > request > har-validator@5.1.5: this library is no longer supported
warning electron-icon-builder > jimp > @jimp/custom > @jimp/core > phin@2.9.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning electron-icon-builder > jimp > @jimp/plugins > @jimp/plugin-print > load-bmfont > phin@2.9.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "electron-builder > app-builder-lib@24.13.3" has unmet peer dependency "electron-builder-squirrel-windows@24.13.3".
[4/4] Building fresh packages...
[-/3] ⠂ waiting...
[-/3] ⠂ waiting...
error D:\ViteProject\ett\node_modules\phantomjs-prebuilt: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: D:\ViteProject\ett\node_modules\phantomjs-prebuilt
Output:
PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\OAO\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: socket hang up
    at connResetException (node:internal/errors:720:14)
    at TLSSocket.socketOnEnd (node:_http_client:525:23)
    at TLSSocket.emit (node:events:526:35)
    at endReadableNT (node:internal/streams/readable:1359:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)



PS D:\ViteProject\ett> 

新建electron主进程入口

在根目录新建一个background.js文件，用于编码主进程。

// background.js

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

const { join, dirname } = require('path');

const fs = require('fs');

const log = require('electron-log');

const { autoUpdater } = require('electron-updater');

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

// 当前环境是不是开发环境 (true 是 , false 不是)
const isDevelopment = process.env.NODE_ENV === 'development'

// 全局窗口变量
let win = null;

const createWindow = () => {
    win = new BrowserWindow({
        // 窗口图标
        icon: join(__dirname, 'resources/icon/icon.ico'),
        width: 800,
        height: 600,
        webPreferences: {
            webSecurity: false,//禁用同源策略
            contextIsolation: false,
            nodeIntegration: true,
        }
    })

    // 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'
// 配置 vite-plugin-electron
import electron from 'vite-plugin-electron'

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

在 package.json 文件去除 "type": "module",

在 package.json 文件加入 "main": "background.js",

在 package.json 修改 "scripts":{},如下：

package.json

{
  "name": "electron-vite4-vue3",
  "private": true,
  "version": "0.0.0",
  "main": "background.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    // 运行electron项目
    "electron:serve": "chcp 65001 && vite --host",
    // 打包项目
    "electron:build": "vite build && electron-builder",
    // 制作项目icon图标，解释：将目录public下的app.png(该logo图片用户开发者自定义)转为图标到resources目录下的icons文件夹中(icons文件夹是自动创建的)
    "electron:icons": "electron-icon-builder --input=./public/app.png --output=resources --flatten"
  },
  "dependencies": {
    "vue": "^3.3.11",
    "electron-log": "^5.0.3",
    "electron-updater": "^6.1.7",
    "electron-icon-builder": "^2.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "electron": "^28.1.1",
    "electron-builder": "^24.9.1",
    "electron-devtools-installer": "^3.2.0",
    "vite": "^5.0.8",
    "vite-plugin-electron": "^0.28.0"
  }
}

新增打包文件 , 根目录下新建一个 electron-builder.json 打包脚本文件

{
    "productName": "EGC",
    "appId": "app.9264946.egc",
    "copyright": "Copyright © 2023",
    "compression": "maximum",
    "asar": true,
    "directories": {
        "output": "dist/${version}"
    },
    "extraFiles": [
        "./resources"
    ],
    "publish": {
        "provider": "generic", // 自建服务器,阿里云、腾讯云、华为云等服务器
        "url": "http://115.159.206.158:90" // 升级程序所在服务器IP地址或者域名,后期程序升级所需
    },
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true,
        "perMachine": true,
        "deleteAppDataOnUninstall": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "EGC"
    },
    "win": {
        "icon": "./resources/icons/icon.ico",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
        "target": [
            {
                "target": "nsis",
                "arch": [
                    "x64"
                ]
            }
        ]
    }
}

运行窗口项目

在终端输入 yarn run electron:serve

yarn run electron:serve

基础的项目运行成功

打包窗口项目

在终端输入 yarn run electron:build ，打包后的文件位于 根目录下的 dist 文件夹中 ，点击 .exe 后缀的安装文件即可安装