【electron】 vite + electron-builder 打包配置

创一个vite项目

 npm init vite 

安装打包工具

 npm i -D electron // 20.1.0npm i -D electron-builder // 23.3.3 

electron是开发时运行环境，electron-builder是打包exe用的。

配置桌面环境

打开 electron 官网，找到“快速开始”。基本上看完这一章就可以实现将页面通过桌面程序运行出来了。

创建 主进程 main.js

项目更目录下创建 main.js文件与 preload.js 文件, 代码可以直接复制官网示例

// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。 

// preload.js

// All the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
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 运行命令

打开 package.json 在 scrpit 对象中添加 electron 运行命令

 "scripts": {"dev": "vite --host","build": "vite build","preview": "vite preview","start": "electron .",}, 

打包项目，生成dist

运行 npm run build, 生成dist文件。并且将main.js中mainWindow.loadFile路径修改为 ‘./dist/index.html’

 const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, '/preload.js')}})// 加载 index.html// mainWindow.loadFile('index.html')mainWindow.loadFile('./dist/index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
} 

最后运行 npm run start

解决资源无法加载

最后运行出来会发现是白屏，打开程序控制台可以看到是js文件找不到。 打开dist中index.html发现是js和css路径都是绝对路径，所以这里需要修改为相对路径。

打开 vite.config.js 配置更路径为相对路径

export default defineConfig({plugins: [vue()],base: './',
}) 

然后重新打包，再运行npm run start 就可以看到页面了。

开发环境：热更新

这里在开发环境中有一个问题就是，咱们这里的渲染进程是打包好的dist文件，无法每次修改后热更新。只有重新打包生成新的dist后页面才会更新。这在开发的时候显然是方便的。

两个工具 concurrently wait-on

 npm i concurrently -Dnpm i wait-on -D 

• concurrently：方便 script 同时启动多个命令
• wait-on：它可以等待文件、端口、套接字和 http(s) 资源可用后触发。

开发时热更新，我们就要放弃build一个dist文件来作为渲染进程的做法了。 简单来说，我们正常执行 npm run dev 生成一个页面服务，这样的环境是有热更新的。所以我们只需要在主进程中加载dev服务中的页面作为渲染进程就可以了。 修改一下主进程 main.js

 ...const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, "/preload.js"),},});// 加载 index.htmlmainWindow.loadURL("http://localhost:3333/");// 打开开发工具// mainWindow.webContents.openDevTools()};... 

然后打开两个终端，第一个先执行 npm run dev，等待服务启动后在另外一个里执行npm run start 即可。

当然我们也可以一个命令完成这些。在package.json中添加命令：

 ..."scripts": {"dev": "vite --host","build": "vite build","preview": "vite preview","start": "electron .","electron": "wait-on tcp:3333 && electron .","exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\""},... 

开发时执行 exe-dev 即可。

打包exe

添加打包命令

 ..."scripts": {"dev": "vite --host","build": "vite build","preview": "vite preview","start": "electron .","electron": "wait-on tcp:3333 && electron .","exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\"","exe-build": "electron-builder"},... 

执行 npm run exe-build ，等待执行结束，dist文件夹下会多一个win-unpacked，其里面有一个exe文件就是我们的程序执行文件。

现在我们加载的还是dev服务，所以还需要修改一下主进程main.js

 ...// 加载 index.html// 判断当前是否为开发环境console.log("isPackaged: ", app.isPackaged);if (<img src="http://localhost:3333/");} else {mainWindow.loadFile("./dist/index.html");}..." style="margin: auto" />

app.isPackaged 主要用来判断是否为开发环境。

解决index.html找不到的问题

我们打开win-unpacked，执行exe文件，会发现页面没有内容，打开F12控制台，发现index.html根本没有找到。

其地址 …dist/win-unpacked/resources/app.asar/dist/index.html，找不到的原因可以大概猜一下是我们的页面没有打包进app.asar中。

所以我们可以在electron-builder打包配置中设置一下我们要打包的文件。

项目更目录创建 electron.config.json

{"files": ["main.js", "preload.js", "./dist"],"productName": "test"
} 

这里我们设置了files字段，其目的就是设置打包的数据内容。 productName 就是设置exe文件的文件名。

然后修改exe-build命令

 "exe-build": "electron-builder -config electron.config.json" 

运行命令后，可以看到exe文件已经修改为test.exe。双击运行也可以看到页面了。

最后完善一下打包命令

 "exe-build": "vite build & electron-builder -config electron.config.json" 

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取