Electron+Vue3+Vite搭建桌面应用的示例代码
作者：阿虎儿
本文主要介绍了Electron+Vue3+Vite搭建桌面应用的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1. 现实问题
得益于 Vite 卓越的前端开发体验，越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板，但都存在着一些共同的问题：
- 配置相对复杂，繁琐
- 需要辅助脚本来配合编译开发
- 无法举一反三，自主选择前端框架（Vue、React 和 Svelte 等）
- 无法保护源代码
electron-vite旨在解决这些问题，为 Electron 提供更快、更精简的开发体验。
这个脚手架虽然说的很厉害，但是还是有一些不足，比如对vue项目初始化时的配置不如官方的精细。还需要自己手动配置自己喜爱的开发方式。但是瑕不掩瑜，它依然是目前我认为搭建electron配置最少的方式了。
2. 开始
# npm npm create @quick-start/electron # yarn yarn create @quick-start/electron # pnpm pnpm create @quick-start/electron
✔ Project name: … <electron-app> ✔ Select a framework: › vue ✔ Add TypeScript? … No / Yes ✔ Add Electron updater plugin? … No / Yes ✔ Enable Electron download mirror proxy? … No / Yes Scaffolding project in ./<electron-app>... Done.
接下来 npm install安装就可以了
3. 开发调试
script脚本中有两个比较像npm run start和npm run dev
start先打包成静态文件，再启动electron加载本地文件，预打包前的预览dev先启动本地服务器，再启动electron加载服务页面，开发时使用
{
"name": "electron-app",
"version": "1.0.0",
"description": "An Electron application with Vue",
"main": "./out/main/index.js",
"author": "example.com",
"homepage": "https://www.electronjs.org",
"scripts": {
"format": "prettier --write .",
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"start": "electron-vite preview",
"dev": "electron-vite dev",
"build": "electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:win": "npm run build && electron-builder --win --config",
"build:mac": "npm run build && electron-builder --mac --config",
"build:linux": "npm run build && electron-builder --linux --config"
},
"dependencies": {
"@electron-toolkit/preload": "^2.0.0",
"@electron-toolkit/utils": "^1.0.2",
"electron-updater": "^5.3.0"
},
"devDependencies": {
"@electron/notarize": "^1.2.3",
"@rushstack/eslint-patch": "^1.3.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-prettier": "^7.1.0",
"electron": "^24.4.1",
"electron-builder": "^23.6.0",
"electron-vite": "^1.0.23",
"eslint": "^8.42.0",
"eslint-plugin-vue": "^9.14.1",
"less": "^4.1.3",
"prettier": "^2.8.8",
"vite": "^4.3.9",
"vue": "^3.3.4"
}
}执行npm run dev 会看到
4. 打包exe
执行npm run build:win就会开始打包，打包前会从github下载必要的3个资源文件，这三个文件虽然不大，但是大概率要下载失败，所以手动点击报错信息上的网址手动下载下来。
- winCodeSign-2.6.0.7z
- nsis-3.0.4.1.7z
- nsis-resources-3.4.1.7z
下载下来以后，将他们拷贝到C:\Users\[your name]\AppData\Local\electron-builder\Cache目录下，新建两个文件夹winCodeSign和nsis，将压缩包解压到对应的目录，结构如下
- winCodeSign\winCodeSing-2.6.0
- nsis\nsis-3.0.4.1
- nsis\nsis-resources-3.4.0
然后再执行npm run build:win
* 正在执行任务: npm run build:win > electron-app@1.0.0 build:win > npm run build && electron-builder --win --config > electron-app@1.0.0 build > electron-vite build vite v4.3.9 building for production... ✓ 2 modules transformed. out/main/index.js 1.43 kB ✓ built in 147ms vite v4.3.9 building for production... ✓ 1 modules transformed. out/preload/index.js 0.42 kB ✓ built in 18ms vite v4.3.9 building for production... ✓ 11 modules transformed. ../../out/renderer/index.html 0.52 kB ../../out/renderer/assets/icons-e5112e1e.svg 9.06 kB ../../out/renderer/assets/index-4b0e6ae1.css 2.74 kB ../../out/renderer/assets/index-1a29896b.js 150.63 kB ✓ built in 1.25s • electron-builder version=23.6.0 os=10.0.22621 • loaded configuration file=D:\leehoo2\electron-app\electron-builder.yml • writing effective config file=dist\builder-effective-config.yaml • skipped dependencies rebuild reason=npmRebuild is set to false • packaging platform=win32 arch=x64 electron=24.5.1 appOutDir=dist\win-unpacked • building target=nsis file=dist\electron-app-1.0.0-setup.exe archs=x64 oneClick=true perMachine=false • building block map blockMapFile=dist\electron-app-1.0.0-setup.exe.blockmap * 终端将被任务重用，按任意键关闭。
打包后的exe文件就在项目的dist目录，双击后直接安装了，也没有提示安装目录等提示。
具体个性化的需求还需要自行查看官网进行调整。
到此这篇关于Electron+Vue3+Vite搭建桌面应用的示例代码的文章就介绍到这了,更多相关Electron+Vue3+Vite搭建桌面应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！