vue3+vite+electron开发桌面端应用流程

一、创建项目

初始化项目: npm init vite@latest'
project name: 输入项目名称，select a framework: 选择框架vue
select a variant：选择使用js或者ts
安装默认依赖包: 进入项目，npm install
安装electron: npm install --save-dev electron
安装热加载(自动加载更新): npm install electron-reload --save-dev(注意：electron-reload目前最新版本是2.0.0-alpha.1, 需要安装指定的稳定版)
安装打包工具: npm install electron-builder --dev

二、配置electron相关的文件

在根目标下创建文件夹electron，存放electron相关的文件
electron 文件夹下创建preload.js文件，通过预加载脚本从渲染器访问Node.js。

// preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(${dependency}-version, process.versions[dependency])
}
})
electron 文件夹下创建main.js, 作为electron的入口文件

// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
// app 模块，它控制应用程序的事件生命周期。
// BrowserWindow 模块，它创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron');
const path = require('path')
// 打开窗口
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800, // 窗口的宽度
height: 600, // 窗口的高度
// 网页功能设置
webPreferences: {
nodeIntegration: true, // 是否启用Node integration. 默认值为 false.
contextIsolation: false, // 是否在独立 JavaScript 环境中运行 electron API和指定的preload 脚本. 默认为 true
enableRemoteModule: true, // 启用或远程模块, 默认为 true
preload: path.join(__dirname, 'preload.js'), // 使用预加载脚
},
autoHideMenuBar: true, // 窗口菜单栏是否自动隐藏，默认false
})
// 通过改变变量值来控制加载的文件，dev 或者build时修改env值。
let env = 'pro';
// 配置热更新
if (env == 'pro') {
const elePath = path.join(__dirname, '../node_modules/electron')
require('electron-reload')('./', {
electron: require(elePath),
})
// 热更新监听窗口，这里是vue启动时的地址
mainWindow.loadURL('http://localhost:8888')
// 打开开发工具
mainWindow.webContents.openDevTools()
} else {
// 生产环境中要加载文件 index.html
mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
}
}

// 这段程序将会在 electron 结束初始化和创建浏览器窗口的时候调用
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 如果没有其他打开的窗口，那么程序会重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})

// 当所有窗口都被关闭的时候退出程序。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
根目录下创建electron-builder.json

// electron-builder.json
{
"productName": "appName", // 包名称
"files": ["./electron/main.js", "./dist"],
"extraFiles": ["./videos", "./cvideo"],
"directories": {
"output": "./builder"
}
}

package.json中配置electron命令
在scripts中添加electron运行和打包命令：

复制代码

 "electron:serve": "electron .", 
 "electron:build": "vite build & electron-builder build --config electron-builder.json"

三、项目启动和打包

启动vue项目： npm run dev
启动electron: npm run electron:serve
打包electron: npm run electron:build

四、常见问题及解决方法

报错信息：electron Unable to find Electron app at *****
报错原因：入口文件路径错误
解决方法：在package中添加electron应用程序的入口文件路径："main": "electron/main.js"
报错信息：ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension an ***
报错原因：require 在 ESM 规范中未定义
解决方法：删除"type": "module"
build时报错信息：https://github.com/electron/electron/releases/download/v20.3.1/electron-v20.3.1-win32-x64.zip": dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond
报错原因：打包时要到github上下载electron, 速度很慢导致失败。
解决方法：从github上下载electron到C:\Users\xxx\AppData\Local\electron\Cache\xxxxx
打包后的exe文件执行时页面空白
报错原因：资源路径是被打包成了绝对路径
解决方法：找到vite.config.js进行修改文件加载路径：

export default defineConfig({
base: './',设置基础路径为根目录
});