一、项目准备
1. clone已有web项目到本地(略)
2. 将web项目打包生成dist文件
pnpm run build:prod
二、electron准备
1. 安装依赖
pnpm install --save-dev electron
2. electron文件配置
1)根目录下创建electron文件夹,并添加main.js、preload.js
2)main.js(作为electron的主进程文件夹)
// 导入模块
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建主窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 1440,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
contextIsolation: false, // 可以使用require方法
enableRemoteModule: true, // 可以使用remote方法
}
})
// 和自己本地vue项目启动的地址保持一致
mainWindow.loadURL('http://localhost:80')
}
// 应用准备就绪,加载窗口
app.whenReady().then(() => {
createWindow()
// mac 上默认保留一个窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 关闭所有窗口 : 程序退出 : windows & linux
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
注意:须将main.js中的此项修改为本地web项目启动地址,否则后续运行electron项目将会出现白屏的情况
3)preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与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])
}
})
3. 修改package.json文件
1)删除代码
"type": "module"
注意:如不删除该代码会报以下错误
2)新增代码
"main":"electron/main.js"
"electron":"electron ."
4. 启动项目
1)启动 web 项目
pnpm run dev
2)新建终端,启动 electron 项目
pnpm run electron
参考文章: