一. 思路
先说结论,重点还是在于 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
└── ...