【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!

效果图

Tauri的二进制文件体积显著小于Electron,安装包通常缩小80%以上。应用启动更快,内存占用更低,尤其在老旧设备上体验更流畅。

写在前面

  1. Tauri官网 https://tauri.app/zh-cn/
  2. 支持语言:js、ts、rust、.net
  3. 编译出来的exe文件,最小8MB+,启动也快 (比不上flutter)
    为什么这么小?
    官网:Tauri 利用了已经存在于每一个用户系统的 webview。Tauri 应用中只包含了该应用专属的代码和资源文件,++不需要在每个应用中都打包一个浏览器引擎++,这意味着一个最小化的 Tauri 应用体积可能小于 600KB。
  4. rust下载安装太慢? Windows快速安装Rust_windows安装rust慢-CSDN博客

前提

  1. 当前环境:win10
  2. 参考官网安装以下依赖 (各自用迅雷下载比较快)
    1)Microsoft C++ 生成工具
    2)WebView2
    3)Rust (安装前先设置两个环境变量,参考 CSDN博客

    4)Node.js > node版本不要太低,建议22.14.0

步骤

  1. 假设需要创建的项目名:note

  2. 创建Tauri+Vue项目,参考https://tauri.app/zh-cn/start/create-project/

    bash 复制代码
    npm create tauri-app@latest
  3. 创建完毕

  4. 安装项目的依赖包

    bash 复制代码
    cd note
    npm install
  5. 开启本地开发模式 (windows桌面程序) - 完成后会自动启动exe

    bash 复制代码
    npm run tauri dev

    第一次的时间比较长,后面就很快了。

  6. 如何开发: 参考vuejs正常开发即可

  7. 如何使用tailwindcss?
    使用 Vite 安装 Tailwind CSS - Tailwind CSS 框架https://tailwind.org.cn/docs/installation/using-vite

    1)npm install tailwindcss @tailwindcss/vite

    2)创建\src\assets\tailwincss.css,内容:
    @import "tailwindcss";

    3)修改\src\main.js
    import './assets/tailwincss.css'

    4)修改\vite.config.ts

    5)完成

  8. 开发完成

  9. Tauri编译输出-导出、分发、输出、build、构建:

    bash 复制代码
    npm run tauri build

    https://tauri.nodejs.cn/distribute/

  10. 输出的可执行文件:
    \src-tauri\target\release\note.exe

不同系统运行情况

1.XP

2.win7

3.win10

4.win11

参考

Electron、Tauri及其它跨平台方案终极对比_tauri对比electron-CSDN博客文章浏览阅读1.8k次,点赞14次,收藏25次。基于Chromium(浏览器内核)+ Node.js(后端运行时)的双进程架构,支持HTML/CSS/JS全栈开发。最新版本v28.1.0已支持V8引擎的指针压缩技术,内存占用降低15%。_tauri对比electronhttps://blog.csdn.net/qq_34640315/article/details/146001319IM跨平台:快速对比跨平台框架Electron、Flutter、Tauri等https://baijiahao.baidu.com/s?id=1787765195387214639Windows快速安装Rust_windows安装rust慢-CSDN博客文章浏览阅读980次,点赞7次,收藏17次。Rust 速度惊人且内存利用率极高。由于没有运行时和垃圾回收,它能够胜任对性能要求特别高的服务,可以在嵌入式设备上运行,还能轻松和其他语言集成。_windows安装rust慢https://blog.csdn.net/huyi0911/article/details/138066461

ending...

相关推荐
Zuckjet_6 分钟前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown2 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy2 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip3 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法4 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴4 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.4 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰4 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息5 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
北城以北88885 小时前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea