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

相关推荐
高级程序源3 小时前
django大学生创新创业项目管理系统94923-计算机课程设计、毕业设计
javascript·vue.js·spring boot·后端·python·django·课程设计
lizz22763 小时前
Babel插件手册
javascript
VXbishe6 小时前
【课程设计】基于SpringBoot的乡村政务服务系统的设计与实现-计算机毕设77011
javascript·vue.js·spring boot·python·php·课程设计·政务
志尊宝6 小时前
Vue3 零基础每日笔记(037):动手封装 useMouse 与 useWindowSize——事件监听的标准模板
前端·javascript·vue.js·笔记·html5
shmily麻瓜小菜鸡7 小时前
TDD(测试驱动开发)详解
开发语言·javascript·typescript·node.js·ecmascript
wcy03108 小时前
POST为什么会发送两次请求
javascript·ajax
志尊宝8 小时前
Vue3 零基础每日笔记(047):动态路由与路由参数——:id 传参、query 传参、props 解耦
前端·javascript·vue.js·笔记·html5
凤城老人10 小时前
从零手写开源私有云盘|Flask+Vue3+Electron全栈网盘,单容器一键部署
python·docker·electron·vue
朝屯暮蒙vi12 小时前
随记:h5+中uploader不能添加参数数据,要通过task
javascript
泯泷21 小时前
那段文字是谁删的?Yjs 14 正式版之前,一套删除归属方案的实现与边界
前端·javascript·算法