「Electron的體積問題終于被 Rust 解決了�！埂� 這句話在開發(fā)者社區(qū)流傳已久，但真正動(dòng)手搭過環(huán)境的人才知道，配置過程的坑遠(yuǎn)比想象中多。

本文是一份經(jīng)過驗(yàn)證的搭建指南，目標(biāo)是用 NextJS 作為前端框架，配合 Rust 原生容器輸出能在 Windows、macOS、Linux 上運(yùn)行的桌面應(yīng)用。核心賣點(diǎn)很明確：安裝包從 Electron 常見的 300MB 壓縮到 3MB 量級(jí)，運(yùn)行時(shí)內(nèi)存占用同步下降。

需要提前說明的是，這套方案要求你對(duì) Node.js 生態(tài)和命令行操作有基礎(chǔ)認(rèn)知。如果你還沒裝過 Rust 工具鏈，預(yù)留 30 分鐘給環(huán)境配置。

為什么選這對(duì)組合

NextJS 是目前 React 生態(tài)里最主流的元框架（meta-framework），默認(rèn)服務(wù)于 Web 開發(fā)。但配合一個(gè)瀏覽器"移植層"，它能被導(dǎo)出為桌面和移動(dòng)端應(yīng)用。

這個(gè)移植層的技術(shù)決策很激進(jìn)：用操作系統(tǒng)原生 WebView 替代 Chromium，后端邏輯用 Rust 編寫。結(jié)果是二進(jìn)制體積斷崖式下跌——官方對(duì)比數(shù)據(jù)是 300MB vs 3MB，運(yùn)行時(shí)內(nèi)存同樣顯著降低。

這對(duì)需要快速驗(yàn)證產(chǎn)品想法的團(tuán)隊(duì)有現(xiàn)實(shí)意義。你不需要維護(hù)兩套代碼庫，Web 端的組件庫、狀態(tài)管理、路由邏輯幾乎可以原樣復(fù)用。

環(huán)境準(zhǔn)備階段，直接去官網(wǎng)按操作系統(tǒng)下載依賴。Windows 用戶注意：需要額外安裝 Microsoft Visual Studio C++ 構(gòu)建工具，這個(gè)坑新手常踩。

第一步：初始化 NextJS 項(xiàng)目

打開終端，進(jìn)入你打算存放項(xiàng)目的目錄。執(zhí)行：

pnpx create-next-app

NPM 用戶把 pnpx 換成 npx 即可。全程使用默認(rèn)推薦設(shè)置，不需要改配置項(xiàng)。項(xiàng)目創(chuàng)建完成后，用 code [你的項(xiàng)目名] 在 VSCode 中打開。

這里有個(gè)細(xì)節(jié)：2.0 版本目前處于穩(wěn)定通道，但社區(qū)里還有不少 1.x 的老教程。如果你搜到需要手動(dòng)配置 tauri.conf.json 里 security.csp 的帖子，那是舊版本，直接跳過。

第二步：接入工具鏈

在 VSCode 內(nèi)置終端中操作，可以實(shí)時(shí)看到文件變更。建議用 Cargo 安裝 CLI，畢竟底層是 Rust 生態(tài)：

cargo install tauri-cli --version "^2.0.0" --locked

--locked 參數(shù)確保依賴版本鎖定，避免"在我機(jī)器上能跑"的玄學(xué)問題。安裝完成后，執(zhí)行初始化：

cargo tauri init

交互式提示全部選默認(rèn)即可。這會(huì)生成 src-tauri 目錄，包含 Rust 后端代碼和配置文件。

關(guān)鍵配置在 src-tauri/tauri.conf.json，需要手動(dòng)確認(rèn)以下字段：

{ "build": { "beforeDevCommand": "pnpm dev", "beforeBuildCommand": "pnpm build", "devUrl": "http://localhost:3000", "frontendDist": "../out" } }

beforeDevCommand 和 beforeBuildCommand 告訴后端如何驅(qū)動(dòng)前端構(gòu)建。devUrl 是開發(fā)服務(wù)器地址，frontendDist 指向 NextJS 的靜態(tài)導(dǎo)出目錄。

第三步：改造 NextJS 配置

打開 next.config.ts，替換為以下內(nèi)容：

const isProd = process.env.NODE_ENV === 'production'; const internalHost = process.env.TAURI_DEV_HOST || 'localhost'; /** @type {import('next').NextConfig} */ const nextConfig = { output: 'export',