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
└── ...