Vite+Electron快速构建一个VUE3桌面应用(三)——打包
一. 简介
上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能,现在是时候来看看怎么完成最后一步——打包了。
源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3
系列文章:
- Vite+Electron快速构建一个VUE3桌面应用
- Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载
- Vite+Electron快速构建一个VUE3桌面应用(三)——打包
二. 思路
先说结论,重点还是在于mainWindow.loadURL()
。
打包后还是加载http://localhost:3000
是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder
加载vite打包后的文件进行打包。
为了代码能够根据不同环境在运行时加载http://localhost:3000
,在打包时加载文件,此处需要使用环境变量来切换生产和开发环境。
三. 实现
1. 环境变量
此处使用环境变量NODE_ENV
来切换生产和开发环境,生产环境为NODE_ENV=production
,开发环境为NODE_ENV=development
,若有其它如release
等环境可在此基础上拓展。
2. 创建electron文件夹
在项目根目录下创建文件夹electron
,将main.js
和preload.js
文件移动进来。其结构如下所示:
.
├── README.md
├── electron
│ ├── main.js
│ └── preload.js
...
若还是不太明白可以看看源码中文件结构。
3. 编辑electron/main.js
该文件主要是需要根据环境变量切换electron加载的内容,修改内容如下:
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
修改后的完整内容如下:
// electron/main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
// mainWindow.loadFile('dist/index.html') 将该行改为下面这一行,加载url
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
// 打开开发工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通
编辑于 2021-10-21 09:19