type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 15, 2022 01:15 PM
Created
Aug 21, 2022 10:54 AM
配置环境
1. Vite构建Electron项目
vite创建项目
安装electron
electron安装问题
1. 由于安装electorn时会下载一个非常大的压缩包推荐使用国内的npm镜像
2. 如果遇到如下问题
install时cache miss npm

3. 如果执行
npm cache clean --force
遇到报错
4. 再重新下载即可

注:如果还是受不了速度,直接去淘宝镜像里下载相应的版本
5. 如果是全局安装,在安装完成后,可执行如下命令表示成功(npm会将electron加入环境变量)

2. 文件配置
根目录新建
electron / index.ts
引入electron插件配置
编写代码
electron / index.ts
配置
package.json
增加main
字段(删除type字段)最后运行
npm run dev
即可
打包Electron
打包这个东西真的把我人都整嘛了、各种各样的问题层出不穷
安装
electron-builder
修改
npm run build
命令package.json
配置Electron信息最后进行打包
npm run build

nsis配置
打包下载问题



在打包过程中会下载四个包:
electron.zip
、winCodeSign.7z
、nsis.7z
、nsis-resource.7z
不知道为什么反正我这边怎么下都下不了
Package
里面提供了4个包的下载,也可以根据提示去github上自行下载package
4个包要放在分别如下位置:(很重要!!!)
electron
→C:\Users\Administrator\AppData\Local\electron\Cache
winCodeSign
→C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign
nsis
→C:\Users\Administrator\AppData\Local\electron-builder\Cache
nsis
→C:\Users\Administrator\AppData\Local\electron-builder\Cache
其中
nsis
、nsis-resource
需解压,存放在Cahe
中,对于他们两的文件夹如果最后的文件夹不存在,自行创建
Electron Vscode 输出乱码解决
参考链接:
- 作者:JinSo
- 链接:https://jinso.top/article/vue-vite-electron-use
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。