Uniapp+Vite+Vue3+Electron 快速构建桌面应用(三)---打包

一. 思路

先说结论，重点还是在于 mainWindow.loadURL()

打包后还是加载http://localhost:3000是无法运行的，因此需要在打包前拿到文件的真实路径

为了代码能够根据不同环境在运行时加载http://localhost:3000，在打包时加载文件，此处需要使用环境变量来切换生产和开发环境。

二. 设置不同环境下的代码

1. 使用 cross-env

该库让开发者只需要注重环境变量的设置，而无需担心平台设置

npm install  -D cross-env

2. 编辑 electron/main.js :

// main.js 中内容如下const { app, BrowserWindow } = require('electron')
const path = require('path') // 新增
const NODE_ENV = process.env.NODE_ENV // 新增
const createWindow = () => {const win = new BrowserWindow({width: 1200,height: 800,})// 修改 区分环境 win.loadURL(NODE_ENV === 'development'? 'http://localhost:3000':`file://${path.join(__dirname,'../dist/build/h5/index.html')}`)// win.webContents.openDevTools() // 开启调试工具
}
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

2. 编辑 package.json , scripts

"scripts": {"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 修改
},

三. 打包并分发应用程序

1. 使用 Electron Forge

将 Electron Forge 添加到应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架

npm install --save-dev @electron-forge/cli
npx electron-forge import

2. 使用 Electron Forge 的 make 命令来创建可分发的应用程序

npm run make

Electron-forge 会在根目录下创建 out 文件夹，软件包将在存放在那里

out/
├── make/squirrel.windows/x64
├── uni-preset-vue-win32-x64
└── ...

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！