electron+vue3+Neon实现是我经过Rust、C#、TS体系,综合选型,考虑免费、功能健全,开发难易程度,跨平台兼容性,运行效率和性能,综合选型,决定搭建这样一套技术栈实现。
因此整体技术体系为:
electron+vite+vue3+element Plus+Neon+Rust实现。
构建neon项目。
在这之前请安装好Rust。
npm install neon-cli -g
npm init neon neon-rust # 生成 Rust+Neon 项目
执行内容如下。
PS F:\ws\electron_ws\electron-rust-base_ws> npm init neon neon-rust
> npx
> create-neon neon-rust
This utility will walk you through creating a Neon project.
It only covers the most common items, and tries to guess sensible defaults.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Use `npm run build` to build the Neon project from source.
Press ^C at any time to quit.
neon project type: (app) help
Sorry, type should be a valid Neon project type ("app" or "lib").
neon project type: (app) lib
neon target platforms: (common) help
Sorry, platforms should be a comma-separated list of platforms or platform presets.
neon target platforms: (common)
neon binary cache: (npm) help
Sorry, cache should be a supported Neon binary cache type ("npm" or "none").
neon binary cache: (npm)
neon cache org: (@neon-rust)
neon ci provider: (github) help
Sorry, provider should be a supported Neon CI provider ("github" or "none").
neon ci provider: (github) none
package name: (neon-rust)
version: (0.1.0)
description:
git repository:
keywords:
author:
license: (ISC)
About to write to F:\ws\electron_ws\electron-rust-base_ws\neon-rust\package.json:
{
"name": "neon-rust",
"version": "0.1.0",
"exports": {
".": {
"import": {
"types": "./lib/index.d.mts",
"default": "./lib/index.mjs"
},
"require": {
"types": "./lib/index.d.cts",
"default": "./lib/index.cjs"
}
}
},
"types": "./lib/index.d.cts",
"main": "./lib/index.cjs",
"files": [
"lib/**/*.?({c,m}){t,j}s"
],
"scripts": {
"test": "tsc &&cargo test",
"cargo-build": "tsc &&cargo build --message-format=json-render-diagnostics > cargo.log",
"cross-build": "tsc &&cross build --message-format=json-render-diagnostics > cross.log",
"postcargo-build": "neon dist < cargo.log",
"postcross-build": "neon dist -m /target < cross.log",
"debug": "npm run cargo-build --",
"build": "npm run cargo-build -- --release",
"cross": "npm run cross-build -- --release",
"prepack": "tsc &&neon update",
"version": "neon bump --binaries platforms && git add ."
},
"neon": {
"type": "library",
"org": "@neon-rust",
"platforms": {},
"load": "./src/load.cts"
},
"devDependencies": {
"@neon-rs/cli": "^0.1.82",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.11.16",
"typescript": "^5.3.3"
},
"dependencies": {
"@neon-rs/load": "^0.1.82"
},
"author": "",
"license": "ISC",
"description": ""
}
Is this OK? (yes)
✨ Created Neon project `neon-rust`. Happy 🦀 hacking! ✨
PS F:\ws\electron_ws\electron-rust-base_ws>
同一目录下,创建electron+vite+vue3项目。
electron-vite 下一代 Electron 开发构建工具官网
pnpm create @quick-start/electron electron-neon-base --template vue-ts
electron-vite-vue3-neon-rust-base
PS F:\ws\electron_ws\electron-rust-base_ws> pnpm create @quick-start/electron electron-neon-base --template vue-ts
√ Add Electron updater plugin? ... No / Yes
√ Enable Electron download mirror proxy? ... No / Yes
Scaffolding project in F:\ws\electron_ws\electron-rust-base_ws\electron-neon-base...
Done. Now run:
cd electron-neon-base
pnpm install
pnpm dev
PS F:\ws\electron_ws\electron-rust-base_ws>
主进程: <root>/src/main/{index|main}.{js|ts|mjs|cjs}
预加载脚本: <root>/src/preload/{index|preload}.{js|ts|mjs|cjs}
渲染器: <root>/src/renderer/index.html
用VScode打开,或者webstrom.
这里执行如果用pnpm install
,然后执行npm run dev
时,会报错。
dev server running for the electron renderer process at:
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
error during start dev server and electron app:
Error: Electron uninstall
at getElectronPath (file:///F:/ws/electron_ws/electron-rust-base_ws/electron-neon-base/node_modules/.pnpm/electron-vite@3.1.0_vite@6.2.4_@types+node@22.13.17_/node_modules/electron-vite/dist/chunks/lib-DyJQBCfr.mjs:132:19)
at startElectron (file:///F:/ws/electron_ws/electron-rust-base_ws/electron-neon-base/node_modules/.pnpm/electron-vite@3.1.0_vite@6.2.4_@types+node@22.13.17_/node_modules/electron-vite/dist/chunks/lib-DyJQBCfr.mjs:205:26)
at createServer (file:///F:/ws/electron_ws/electron-rust-base_ws/electron-neon-base/node_modules/.pnpm/electron-vite@3.1.0_vite@6.2.4_@types+node@22.13.17_/node_modules/electron-vite/dist/chunks/lib-PoOhNRXw.mjs:74:14)
at async CAC.<anonymous> (file:///F:/ws/electron_ws/electron-rust-base_ws/electron-neon-base/node_modules/.pnpm/electron-vite@3.1.0_vite@6.2.4_@types+node@22.13.17_/node_modules/electron-vite/dist/cli.mjs:67:9)
image.png
测试发现,用yarn
或者npm install
是没问题的。这里推荐用yarn
。
拉包成功后,执行npm run dev
没问题,但执行npm run build:win
,会报错:
image.png
是因为没有C盘的写入权限导致的。
使用管理员权限打开命令行工具进入到脚本目录,再次执行打包,就能成功。
image.png
Microsoft Windows [版本 10.0.26100.3476]
(c) Microsoft Corporation。保留所有权利。
C:\Windows\System32>cd F:\ws\electron_ws\electron-rust-base_ws\electron-neon-base
C:\Windows\System32>F:
F:\ws\electron_ws\electron-rust-base_ws\electron-neon-base>npm run build:win
> electron-neon-base@1.0.0 build:win
> npm run build && electron-builder --win --x64
> electron-neon-base@1.0.0 build
> npm run typecheck && electron-vite build
> electron-neon-base@1.0.0 typecheck
> npm run typecheck:node && npm run typecheck:web
> electron-neon-base@1.0.0 typecheck:node
> tsc --noEmit -p tsconfig.node.json --composite false
> electron-neon-base@1.0.0 typecheck:web
> vue-tsc --noEmit -p tsconfig.web.json --composite false
vite v6.2.4 building SSR bundle for production...
✓ 2 modules transformed.
out/main/index.js 1.48 kB
✓ built in 71ms
vite v6.2.4 building SSR bundle for production...
✓ 1 modules transformed.
out/preload/index.js 0.42 kB
✓ built in 12ms
vite v6.2.4 building for production...
✓ 13 modules transformed.
../../out/renderer/index.html 0.55 kB
../../out/renderer/assets/electron-DtwWEc_u.svg 5.82 kB
../../out/renderer/assets/index-DYKlvrFZ.css 6.74 kB
../../out/renderer/assets/index-CwL0YGOY.js 173.04 kB
✓ built in 544ms
• electron-builder version=25.1.8 os=10.0.26100
• loaded configuration file=F:\ws\electron_ws\electron-rust-base_ws\electron-neon-base\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=35.1.2 appOutDir=dist\win-unpacked
• updating asar integrity executable resource executablePath=dist\win-unpacked\electron-neon-base.exe
• downloading url=https://npmmirror.com/mirrors/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
• downloaded url=https://npmmirror.com/mirrors/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=1.257s
• signing with signtool.exe path=dist\win-unpacked\electron-neon-base.exe
• no signing info identified, signing is skipped signHook=false cscInfo=null
• building target=nsis file=dist\electron-neon-base-1.0.0-setup.exe archs=x64 oneClick=true perMachine=false
• downloading url=https://npmmirror.com/mirrors/electron-builder-binaries/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1
• downloaded url=https://npmmirror.com/mirrors/electron-builder-binaries/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=688ms
• signing with signtool.exe path=dist\win-unpacked\resources\elevate.exe
• no signing info identified, signing is skipped signHook=false cscInfo=null
• downloading url=https://npmmirror.com/mirrors/electron-builder-binaries/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1
• downloaded url=https://npmmirror.com/mirrors/electron-builder-binaries/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=935ms
• signing with signtool.exe path=dist\__uninstaller-nsis-electron-neon-base.exe
• no signing info identified, signing is skipped signHook=false cscInfo=null
• signing with signtool.exe path=dist\electron-neon-base-1.0.0-setup.exe
• no signing info identified, signing is skipped signHook=false cscInfo=null
• building block map blockMapFile=dist\electron-neon-base-1.0.0-setup.exe.blockmap
F:\ws\electron_ws\electron-rust-base_ws\electron-neon-base>
打包成功的包会在dist
下面。
image.png
其他文件都是多余的,只需要拿
electron-neon-base-1.0.0-setup.exe
去用就好。