【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...

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8506 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀8 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
前端工作日常8 小时前
平台价值与用户规模的共生关系
electron·测试·puppeteer
NUC_Dodamce9 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
阿夹克斯9 小时前
告别Vite脚手架局限!MixOne Beta测试招募:你的需求,我们来实现
electron
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js