建议视频教程小满Vue3（第三十九章 electron桌面程序）_哔哩哔哩_bilibili

Electron官网Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

我们用的VsCode 也是 electron 开发的

electron 内置了 Chromium 和 nodeJS 其中 Chromium 是渲染进程主要渲染和解析HTML，Nodejs作为主进程，其中管道用IPC 通信

1.使用vite 构建 electron项目

创建一个vite 项目

npm init vite@latest

安装electron

npm install electron -D
npm install vite-plugin-electron -D

根目录新建 electron / index.ts

修改vite.config.ts 配置文件

引入electron插件配置main entry对应electron的文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), electron({main: {entry: "electron/index.ts"}})]
})

编写代码 electron / index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。let win: BrowserWindow | null;
//定义全局变量获取 窗口实例const createWindow = () => {win = new BrowserWindow({//webPreferences: {devTools: true,contextIsolation: false,nodeIntegration: true//允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）}})if (app.isPackaged) {win.loadFile(path.join(__dirname, "../index.html"));} else {
//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAMEwin.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`)}
}
//isPackage 不好使换下面的//  if(process.env.NODE_ENV != 'development'){//  win.loadFile(path.join(__dirname, "../index.html"));//  }else{//win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)// }
//在Electron完成初始化时被触发
app.whenReady().then(createWindow)

配置package json 增加main 字段 type 去掉

{"name": "electron-vite","private": true,"version": "0.0.0","main": "dist/electron/index.js","scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build  &&  electron-builder","preview": "vite preview"},"dependencies": {"vue": "^3.2.37"},"devDependencies": {"@vitejs/plugin-vue": "^3.0.0","electron": "^19.0.10","electron-builder": "^23.1.0","typescript": "^4.6.4","vite": "^3.0.0","vite-plugin-electron": "^0.8.3","vue-tsc": "^0.38.4"}
}

npm run dev

2.打包Electron

需要安装electron-builder

npm install electron-builder -D

package json 配置 build 修改npm run build命令

"build": "vue-tsc --noEmit && vite build  &&  electron-builder",

  "build": {"appId": "com.electron.desktop","productName": "electron","asar": true,"copyright": "Copyright © 2022 electron","directories": {"output": "release/"},"files": ["dist"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},"publish": [{"provider": "generic","url": "http://127.0.0.1:8080"}],"releaseInfo": {"releaseNotes": "版本更新的具体内容"}}

nsis 配置详解

{"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装）"allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）"allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序）"installerIcon": "public/timg.ico",// 安装程序图标的路径"uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径"installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序）"installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）"installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）"uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）"uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称"createDesktopShortcut": true, // 是否创建桌面快捷方式"createStartMenuShortcut": true,// 是否创建开始菜单快捷方式"shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称"include": "script/installer.nsi",  // NSIS包含定制安装程序脚本的路径，安装过程中自行调用  (可用于写入注册表 开机自启动等操作)"script": "script/installer.nsi",  // 用于自定义安装程序的NSIS脚本的路径"deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）"runAfterFinish": true,  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）"menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
}

npm run build

3.Electron Vscode 输出乱码解决方案

dev 的时候加上chcp 65001 输出中文

 "dev": "chcp 65001 && vite",

加上之后

4.渲染进程和主进程通信

vite.config.ts 需要修改不然会报一个错Error: Module "path" has been externalized for browser compatibility. Cannot

只要安装了 vite-plugin-electron 就会带上 vite-plugin-electron-renderer 直接引入用就行

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import electronRender from 'vite-plugin-electron-renderer'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), electron({main: {entry: "electron/index.ts"}}),electronRender()],build:{emptyOutDir: false,}
})

渲染进程使用ipcRenderer 发送

import { ipcRenderer } from 'electron'const open = () => {ipcRenderer.send('openFlyCar')
}

主进程使用 ipcMain 接受

ipcMain.on('openFlyCar',()=>{console.log('收到')
})

主进程通知渲染进程

const  win = new BrowserWindow(xxxxx)
win!.webContents.send('load', { message: "electron初始化了" })

渲染进程接受

ipcRenderer.on('load',(_,data)=>{console.log(data)
})

5.更多配置查看该插件

vite-plugin-electron: Vite plugin for electron-builder

小满Vue3第三十九章（Vue开发桌面程序Electron）相关推荐

小满Vue3第三十六章（Vue如何开发移动端）
视频教程Vue3 + vite + Ts + pinia + 实战 + 源码 +全栈_哔哩哔哩_bilibili 如果使用npm init vue@latest 报错 error when start ...
【正点原子FPGA连载】第三十九章OV7725摄像头RGB-LCD显示实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
【正点原子STM32连载】第三十九章 DS18B20数字温度传感器实验摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
达芬奇密码第三十九章
达芬奇密码第三十九章 [@more@] 第三十九章虽然布吕耶尔街上那褐色的斯巴达克式石屋已经见证了无数的苦难,但塞拉斯却觉得他现在的痛苦才是世间最难堪的.我被骗了.一切都完了. 塞拉斯被骗了.隐修 ...
第三十九章 SQL命令 DROP TRIGGER
文章目录第三十九章 SQL命令 DROP TRIGGER 大纲参数描述 FROM 子句示例第三十九章 SQL命令 DROP TRIGGER 删除触发器大纲 DROP TRIGGER nam ...
【正点原子MP157连载】第三十九章 LCD驱动实验-摘自【正点原子】STM32MP1嵌入式Linux驱动开发指南V1.7
1)实验平台:正点原子STM32MP157开发板 2)购买链接:https://item.taobao.com/item.htm?&id=629270721801 3)全套实验源码+手册+视频 ...
三十九、Vue项目上手 | 用户管理系统实现添加用户功能（中篇）
@Author:Runsen @Date:2020/7/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
小满Vue3第四十五章（Vue3 Web Components）
什么是 Web Components Web Components 提供了基于原生支持的.对视图层的封装能力,可以让单个组件相关的 javaScript.css.html模板运行在以html标签为界限 ...
学习Vue3 第三十四章（Vue3集成Tailwind CSS）
Tailwind CSS 是一个由js编写的CSS 框架他是基于postCss 去解析的官网地址Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站. 对于PostC ...

小满Vue3第三十九章（Vue开发桌面程序Electron）

1.使用vite 构建 electron项目

2.打包Electron

3.Electron Vscode 输出乱码解决方案

4.渲染进程和主进程通信

5.更多配置查看该插件

小满Vue3第三十九章（Vue开发桌面程序Electron）相关推荐

最新文章

热门文章

小满Vue3第三十九章（Vue开发桌面程序Electron）

1.使用vite 构建 electron项目

2.打包Electron

3.Electron Vscode 输出乱码解决 方案

4.渲染进程和主进程通信

5.更多配置查看该插件

小满Vue3第三十九章（Vue开发桌面程序Electron）相关推荐

最新文章

热门文章

3.Electron Vscode 输出乱码解决方案