「Electron的体积问题终于被 Rust 解决了。」—— 这句话在开发者社区流传已久,但真正动手搭过环境的人才知道,配置过程的坑远比想象中多。
本文是一份经过验证的搭建指南,目标是用 NextJS 作为前端框架,配合 Rust 原生容器输出能在 Windows、macOS、Linux 上运行的桌面应用。核心卖点很明确:安装包从 Electron 常见的 300MB 压缩到 3MB 量级,运行时内存占用同步下降。
需要提前说明的是,这套方案要求你对 Node.js 生态和命令行操作有基础认知。如果你还没装过 Rust 工具链,预留 30 分钟给环境配置。
为什么选这对组合
NextJS 是目前 React 生态里最主流的元框架(meta-framework),默认服务于 Web 开发。但配合一个浏览器"移植层",它能被导出为桌面和移动端应用。
这个移植层的技术决策很激进:用操作系统原生 WebView 替代 Chromium,后端逻辑用 Rust 编写。结果是二进制体积断崖式下跌——官方对比数据是 300MB vs 3MB,运行时内存同样显著降低。
这对需要快速验证产品想法的团队有现实意义。你不需要维护两套代码库,Web 端的组件库、状态管理、路由逻辑几乎可以原样复用。
环境准备阶段,直接去官网按操作系统下载依赖。Windows 用户注意:需要额外安装 Microsoft Visual Studio C++ 构建工具,这个坑新手常踩。
第一步:初始化 NextJS 项目
打开终端,进入你打算存放项目的目录。执行:
pnpx create-next-app
NPM 用户把 pnpx 换成 npx 即可。全程使用默认推荐设置,不需要改配置项。项目创建完成后,用 code [你的项目名] 在 VSCode 中打开。
这里有个细节:2.0 版本目前处于稳定通道,但社区里还有不少 1.x 的老教程。如果你搜到需要手动配置 tauri.conf.json 里 security.csp 的帖子,那是旧版本,直接跳过。
第二步:接入工具链
在 VSCode 内置终端中操作,可以实时看到文件变更。建议用 Cargo 安装 CLI,毕竟底层是 Rust 生态:
cargo install tauri-cli --version "^2.0.0" --locked
--locked 参数确保依赖版本锁定,避免"在我机器上能跑"的玄学问题。安装完成后,执行初始化:
cargo tauri init
交互式提示全部选默认即可。这会生成 src-tauri 目录,包含 Rust 后端代码和配置文件。
关键配置在 src-tauri/tauri.conf.json,需要手动确认以下字段:
{ "build": { "beforeDevCommand": "pnpm dev", "beforeBuildCommand": "pnpm build", "devUrl": "http://localhost:3000", "frontendDist": "../out" } }
beforeDevCommand 和 beforeBuildCommand 告诉后端如何驱动前端构建。devUrl 是开发服务器地址,frontendDist 指向 NextJS 的静态导出目录。
第三步:改造 NextJS 配置
打开 next.config.ts,替换为以下内容:
const isProd = process.env.NODE_ENV === 'production'; const internalHost = process.env.TAURI_DEV_HOST || 'localhost'; /** @type {import('next').NextConfig} */ const nextConfig = { output: 'export',
热门跟贴