创一个vite项目
npm init vite
安装打包工具
npm i -D electron // 20.1.0 npm 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.html mainWindow.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 -D npm 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.html mainWindow.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 (!app.isPackaged) { mainWindow.loadURL("http://localhost:3333/"); } else { mainWindow.loadFile("./dist/index.html"); } ...
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"
以上就是vite + electron-builder 打包配置详解的详细内容,更多关于vite + electron-builder 打包配置的资料请关注阿兔在线工具其它相关文章!