当前位置：首页 > 文章列表 > 文章 > 前端 > 用JavaScript做跨平台桌面应用：ElectronvsTauri对比

用JavaScript做跨平台桌面应用：ElectronvsTauri对比

2025-11-09 10:03:29 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《用JavaScript打造跨平台桌面应用：Electron与Tauri对比解析》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

Electron和Tauri均可使用JavaScript开发跨平台桌面应用，但Electron基于Chromium和Node.js，体积大、生态成熟，适合快速开发；Tauri采用Rust构建核心，体积小、性能高、安全性强，适合追求轻量和性能的项目。

如何用JavaScript构建一个跨平台的桌面应用（使用Electron或Tauri）？

构建跨平台桌面应用，Electron 和 Tauri 是目前最主流的两个选择。它们都能用 JavaScript（或前端技术）开发 Windows、macOS 和 Linux 应用，但设计理念和性能特点不同。下面分别介绍如何使用它们快速搭建一个基础桌面应用。

使用 Electron 快速创建桌面应用

Electron 让你用 HTML、CSS 和 JavaScript 构建桌面程序，背后是 Chromium 和 Node.js。适合熟悉 Web 开发的开发者。

步骤：

初始化项目：
创建文件夹并运行 npm init -y
安装 Electron：
npm install electron --save-dev
创建主进程文件（main.js）：

在项目根目录创建 main.js：

const { app, BrowserWindow } = require('electron')
<p>function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false
}
})</p><p>win.loadFile('index.html')
}</p><p>app.whenReady().then(() => {
createWindow()</p><p>app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})</p><p>app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})</p>

创建页面文件（index.html）：

创建 index.html：

<code><!DOCTYPE html>
<html>
  <head>
    <title>我的桌面应用</title>
  </head>
  <body>
    <h1>Hello from Electron!</h1>
  </body>
</html>
</code>

配置启动脚本：
在 package.json 中添加：
"main": "main.js",
"scripts": { "start": "electron ." }
运行应用：
npm start

打包发布可用 electron-builder 或 electron-packager，生成各平台可执行文件。

使用 Tauri 构建更轻量的桌面应用

Tauri 使用 Rust 构建核心，前端仍可用 JS/HTML/CSS，但体积更小、安全性更高，适合追求性能和小巧的应用。

前提：

安装 Rust（官网 rustup.rs）
Node.js 环境

步骤：

创建前端项目（如 Vite + React/Vue 或纯 HTML）：
npm create vite@latest my-tauri-app -- --template vanilla
进入目录并安装依赖：cd my-tauri-app && npm install
添加 Tauri：
npm install @tauri-apps/cli --save-dev
npx tauri init

Tauri 会生成 src-tauri 目录，包含 Rust 配置和主函数。