🚚Vue + Vite + Electron安装使用
00 分钟
2022-8-13
2022-9-15
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 15, 2022 01:15 PM
Created
Aug 21, 2022 10:54 AM

配置环境

基本要求 | Electron
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。 本教程将指导您使用 Electron 开发一个桌面应用,并将其分发给终端用户。 Electron 是网页应用 (web apps) 的一个原生包装层,在 Node.js 环境中运行。 因此,本教程假设您已经对 Node.js 和前端 Web 开发有一定的了解。 如果您还需要了解一些背景知识,我们推荐您阅读: 您需要一个文本编辑器来编写代码。 我们推荐使用 Visual Studio Code (VS Code),不过您也可以选择自己喜欢的。 在整个教程中,我们将要求您使用各种命令行接口 (CLI) 。 您可以使用系统的默认命令行工具: Windows: 命令提示符 / PowerShell macOS: Terminal Linux: 视发行版决定 (如 GNOME 终端 Konsole) 大多数代码编辑器也内置了终端,您也可以使用它们。 Git 是常用的版本控制系统,GitHub 是一个基于它的协作开发平台。 虽然它们对开发 Electron 应用而言不是必需的,但我们在后续教程中会使用 GitHub Releases 来实现软件的自动更新。 因此,我们建议您: 如果您对 Git 还不熟悉,我们推荐阅读 GitHub 的 Git 指南 。 如果您喜欢可视化界面而不是命令行,也可以使用 GitHub Desktop 。 我们建议您创建一个本地 Git 仓库,在阅读教程之前将其推送到 GitHub,并且在完成教程各个步骤后将代码提交上去。 要开发 Electron 应用,您需要安装 Node.js 运行环境和它的包管理器 npm。 我们推荐安装最新的长期支持 (LTS) 版本。 要检查 Node.js 是否已被安装,您可以在运行 node 和 npm 命令时,加上 -v 参数。 如果已安装,它们应当会输出对应的版本。

1. Vite构建Electron项目

vite创建项目
安装electron
 

electron安装问题

1. 由于安装electorn时会下载一个非常大的压缩包推荐使用国内的npm镜像
2. 如果遇到如下问题
install时cache miss npm
notion image
3. 如果执行npm cache clean --force遇到报错
notion image
4. 再重新下载即可
notion image
💡
注:如果还是受不了速度,直接去淘宝镜像里下载相应的版本
5. 如果是全局安装,在安装完成后,可执行如下命令表示成功(npm会将electron加入环境变量)
notion image
 

2. 文件配置

根目录新建 electron / index.ts
 
引入electron插件配置
 
编写代码 electron / index.ts
 
配置package.json 增加main字段删除type字段
 
最后运行npm run dev即可
notion image
 

打包Electron

打包这个东西真的把我人都整嘛了、各种各样的问题层出不穷
安装electron-builder
 
修改npm run build命令
 
package.json配置Electron信息
 
最后进行打包npm run build
notion image
 

nsis配置

 

打包下载问题

notion image
notion image
notion image
在打包过程中会下载四个包:electron.zipwinCodeSign.7znsis.7znsis-resource.7z
 
不知道为什么反正我这边怎么下都下不了
 
Package里面提供了4个包的下载,也可以根据提示去github上自行下载
 
4个包要放在分别如下位置:(很重要!!!
  • electronC:\Users\Administrator\AppData\Local\electron\Cache
  • winCodeSignC:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
  • nsisC:\Users\Administrator\AppData\Local\electron-builder\Cache
  • nsisC:\Users\Administrator\AppData\Local\electron-builder\Cache
其中nsisnsis-resource需解压,存放在Cahe中,对于他们两的文件夹
如果最后的文件夹不存在,自行创建
 

Electron Vscode 输出乱码解决

 

参考链接:
  1. 小满Vue3第三十九章(Vue开发桌面程序Electron)_小满zs的博客-CSDN博客
  1. 创建您的第一个应用程序 | Electron (electronjs.org)
  1. CodeBlog/electron-builder打包详解.md at master · QDMarkMan/CodeBlog (github.com)
 
上一篇
TypeScript 入门
下一篇
Vue + Vite + Electron安装使用_Backup

评论
Loading...