1、 创建一个名称为electron-vite的vite项目，模板为vue-ts
yarn create vite electron-vite –template vue-ts
2、安装项目依赖
yarn install
3、vite启动测试
npm run dev
5、安装electron concurrently cross-env electron-builder包。
yarn add electron concurrently cross-env electron-builder –D
6、构建electron
创建electron文件夹，在文件夹下创建main.js，preload.js
main.js
// 引入app 浏览器主窗体
const { app, BrowserWindow } = require('electron')
// 引入路径
const path = require('path')
// 环境变量，用于判断当前工程处于开发、生产环境
const NODE_ENV = process.env.NODE_ENV;
// 定义一个窗体函数
function createWindow () {
// 定义窗体对象
const win = new BrowserWindow({
// 定义窗体的宽
width: 800,
// 定义窗体的高
height: 600,
webPreferences: {
// 定义预加载文件
preload: path.join(__dirname, 'preload.js')
}
})
// 定义载入的主页面
// win.loadFile('index.html')
win.loadURL(
// 当环境为开发环境时，访问http://localhost:5173 页面进行显示，否则显示上级目录的dist目录下的index.html文件。
NODE_ENV ==="development" ? "http://localhost:5173" : `file://${path.join(__dirname,"../dist/index.html")}`
);
}
// 当应用准备完毕后，执行事项
app.whenReady().then(() => {
// 创建窗口
createWindow()
// 事件监听为激活时，执行事项
app.on('activate', () => {
// 窗口未显示时，创建窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
// 事件监听为关闭窗口时，退出所有窗口
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
7、构建package.json。
安装wait-on：
yarn add wait-on
使用wait-on等待vite启动后，再启动electron。
安装 cross-env
yarn add cross-env
通过cross-env设置环境变量
配置package.json文件如下：
"electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."
8、测试启动electron。
需要再次安装electron
yarn add electron
启用项目
yarn run electron
2022-8-31 16:50:06
评论区