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