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

相关推荐
CHNE_TAO_EMSM1 小时前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
竹林8183 小时前
从 ethers.js 迁移到 Viem:一个签名验证 Bug 让我彻底放弃旧爱
javascript
你挚爱的强哥3 小时前
Vue2 实现 1.5s 十连击监听(连续点击若干次),封装通用可复用点击检测工具,不用 data!Vue 封装通用连击监听方法,支持自定义时长与点击次数
前端·javascript·vue.js
半个落月4 小时前
用 LangChain.js 手写一个能读写文件和执行命令的 Mini Cursor
javascript·人工智能·后端
天外天-亮4 小时前
HBuilder X 使用 uview-plus 方式
开发语言·javascript·hbuilder x·uview-plus
我有满天星辰5 小时前
Vue项目脚手架之争:create-vue与Vue CLI全面对比
前端·javascript·vue.js
多加点辣也没关系9 小时前
JavaScript|第9章:对象 — 基础
开发语言·javascript·ecmascript
我有满天星辰9 小时前
Vue 2 与 Vue 3 计算属性完全指南:从 Options API 到组合式 API 的演进
前端·javascript·vue.js
后台开发者Ethan9 小时前
setState组件更新
前端·javascript·react
蜡台10 小时前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2