electron项目搭建
前言：electron是一个跨平台桌面端应用开发工具。它将整个系统内容分为主进程和渲染进程两个部分(你可以粗略的理解为electron项目开启了两个服务器，一个渲染页面另一个处理electron窗口内容)。这两个"服务器"之间通过JS Bridge进行通信(即：contextBridge),在主进程的preload预加载中可以同时访问到浏览器进程的window对象和主进程的electron api。此时，我们可以经由ipcRerender(electron中从渲染进程（网页）向主进程发送同步和异步消息的api)将electron的api挂载到window对象上，以便在浏览器进程中使用)，然后在主进程中通过ipcMain(处理从渲染器进程（网页）发送的异步和同步消息。从渲染器发送的消息将被发送到该模块。)监听即可达到进程通信的目的。
本文章主要介绍如何基于vite搭建electron项目
首先创建文件夹并cd到此文件夹中初始化
npm init -y然后安装vite环境
npm i vite -D安装electron(推荐cnpm安装，npm安装有可能会卡住，或者你自己更换镜像地址也行)
cnpm install --save-dev electron安装electron打包工具
cnpm install electron-builder -D接下来安装你想用的框架及配套内容(本文使用的是vue3)
npm i vue vue-router pinia axios less less-loader -s安装vue的构建工具
npm i @vitejs/plugin-vue -D现在我们开始配置文件内容
因为是基于vite搭建的项目，故此需要再根目录新建vite.config.mjs(为啥用mjs稍后会解释)文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'
import { resolve } from 'path'
export default defineConfig({
//项目路径配置
base:'./',
plugins:[
//vue解析插件
vue(),
electron({
//electron项目入口
entry:'./electron/index.js',
vite:{
build:{
//打包目录名
outDir:'dist'
}
}
}),
//渲染进程入口
renderer({
entry:'./src/main.js',
nodeIntegration: true,
})
],
//允许跨域
server:{
cors:true
},
resolve:{
"alias":{
"@":resolve(__dirname,'./src')
}
}
})package.json文件配置
{
"name": "electron",
"version": "1.0.0",
//"type":"module",
/* electron项目不推荐"type":"module"故此我们这里就不使用"type":"module"选项，
启动项目时控制台会提醒The CJS build of Vite's Node API is deprecated
vite已弃用cjs进行构建，我们可以修改vite.config.js为vite.config.mjs
*/
//入口文件
"main": "electron/index.js",
"scripts": {
//启动项目
"dev": "vite",
//打包成windows应用
/* --config electron-builder.json 指根据electron-builder.json配置文件打包，所以需要在根
目录下新建electron-builder.json文件配置打包信息*/
"build": "vite build && electron-builder build --win --x64 --config electron-
builder.json",
//打包成mac应用(注：打包mac应用需要再mac系统中才能打包)
"build:mac":"vite build && electron-builder build --mac --arm64 --config electron-
builder.json",
//打包成linux应用
"build:linux":"vite build && electron-builder build --linux --armv7l --config
electron-builder.json"
},
"keywords": [
"electron",
"vue",
"pinia"
],
"description":"vite-electron",
"author": "仙古梦回",
"license": "ISC",
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.0",
"electron": "^31.2.1",
"electron-builder": "^24.13.3",
"less": "^4.2.0",
"less-loader": "^12.2.0",
"vite": "^5.3.4",
"vite-plugin-electron": "^0.28.7",
"vite-plugin-electron-renderer": "^0.14.5"
},
"dependencies": {
"@vitejs/plugin-vue": "^5.1.0",
"pinia": "^2.1.7",
"vue": "^3.4.33",
"vue-router": "^4.4.0"
}
}
electron-builder.json文件配置
{
"productName": "仙古梦回",
"files": ["./electron/index.js", "./dist"],
"extraFiles": ["./videos", "./cvideo"],
"directories": {
"output": "./dist"
}
}现在我们开始构建主进程文件，在根目录新建electron文件夹并新建index.js
const { app,BrowserWindow,ipcMain } = require('electron')
const path = require('path')
const createWindow = ()=>{
const win = new BrowserWindow({
width:1100,
height:700,
webPreferences:{
nodeIntegration:true, // 禁用 nodeIntegration
contextIsolation: true, // 启用上下文隔离
preload:path.join(__dirname,'./preload.js')
}
})
//关闭菜单
win.setMenu(null)
/*环境变量process.env.VITE_DEV_SERVER_URL，用于获取当前项目的启动地址。
示例：http://localhost:5173
*/
if(process.env.VITE_DEV_SERVER_URL){
win.loadURL(process.env.VITE_DEV_SERVER_URL)
}else{
win.loadFile(path.join(__dirname,'../dist/index.html'))
}
}
//监听渲染进程传过来的great事件
ipcMain.on('great',(event,val)=>{
console.log(val)
})
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})预加载文件配置
const { contextBridge,ipcRenderer } = require('electron')
//用于安全地将 API 从预加载脚本的隔离上下文公开到网站运行的上下文。该 API 也可以像以前一样从 window.myAPI 上的网站访问。
contextBridge.exposeInMainWorld('electronAPI', {
//暴露到渲染进程window对象中的great事件，通过ipcRenderer.send发送给主进程
great: (val) => ipcRenderer.send('great', val)
})构建渲染进程
在根目录建立src文件夹同时在根目录创建index.html作为展示页面(上文建立主进程index.js文件时有引入这个html文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仙古梦回</title>
<!--注意这里的type="module"，我们使用vue开发用的是ESmodule，同时允许跨域crossorigin -->
<script type="module" crossorigin src="./src/main.js" ></script>
</head>
<body>
<div id="app"></div>
</body>
</html>在src文件夹下开始构建vue项目(与普通vue项目构建一样)
main.js文件
import { createApp } from "vue";
import App from './App.vue'
const app = createApp(App)
app.mount('#app')App.vue文件配置
<template>
<div>
<button @click="send">向主进程发送你好</button>
</div>
</template>
<script setup>
const send = ()=>{
window.electronAPI.great('你好123' )
}
</script>
<style lang="less" scoped>
</style>至此，一个基于vite和vue搭建的electron项目就构建完成。
项目代码地址：仙古梦回/electron的搭建
原文地址：https://blog.csdn.net/qq_55139096/article/details/140688743
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！