离线环境玩转 Tauri

离线环境玩转 Tauri

1. Tauri 是什么

Tauri 是一个用于构建跨平台桌面应用程序的框架,它允许开发者使用前端技术(如 React、Vue、Svelte 等)来构建桌面应用程序,同时提供高性能和低资源消耗的特性。

Tauri 的核心思想是使用前端技术来构建桌面应用程序,将前端代码打包成一个独立的可执行文件,并使用 Rust 来提供后端功能,从而实现了高性能和低资源消耗的特性。而且,打包之后的可执行文件和安装包大小远小于Electron,并且运行速度更快。

Tauri 的主要特点包括:高性能、低资源消耗、跨平台支持、安全性高、易于集成等。

2. 为啥要用 Tauri

  • 采用 web 技术开发桌面应用程序,这就很爽!!
  • Tauri 不管啥web框架都支持,直接手写个html也没问题!!
  • Tauri 打包出来的可执行文件,不需要打包webview,体积小多了!!再也不会动不动大几十上百兆了。
  • Tauri 的api都是js,就算完全不懂Rust也不影响使用Tauri !!

好了,开始从零开始搭建Tauri开发环境了!
不对,是从地下室开始搭建,因为公司开发环境网络受限,访问不了外网。。。

3. Tauri 开发环境搭建 - Windows版

3.1 离线安装Microsoft Visual Studio C++ 生成工具

如果开发电脑可以联网,直接下载安装包安装即可:

下载地址:https://visualstudio.microsoft.com/visual-cpp-build-tools/

不幸的是,微软官网的安装工具需要联网下载。。。我的开发环境没网😭

  • 找一台可以上网的电脑
  • 下载 vs_buildtools.exe
  • 下载 layout,其实就是下载安装资源文件
./vs_BuildTools.exe --layout D:\\VSLayout --add Microsoft.VisualStudio.Workload.VCTools --add  Microsoft.VisualStudio.Workload.MSBuildTools --includeRecommended
  • 将 VSLayout 目录压缩,并拷贝到无法联网的开发电脑
  • 进入VSLayout目录,安装
./vs_BuildTools.exe --noWeb --add Microsoft.VisualStudio.Workload.VCTools --add  Microsoft.VisualStudio.Workload.MSBuildTools --includeRecommended
  • 根据提示安装即可

离线按照 VS Studio 采用一样的方式就行,可以自定义选择下载部分组件,组件明细参考

3.2 离线安装 Rust 环境

如果有网的话,直接下载安装器安装,easy模式。。。

下载地址:https://static.rust-lang.org/rustup/dist/x86_64-pc-windows-msvc/rustup-init.exe

不幸的是,安装器需要联网下载。。。我的开发环境没网😭

  • 找一台可以上网的电脑
  • 下载 rustup-init.exe
  • 双击运行安装,按照提示操作就行,简单
  • 安装完成后,将home目录(也就是C:/Users/用户名)的.cargo和.rustup打包。

    如果想减小压缩包体积,可以删除掉.rustup/toolchains/stable-x86_64-pc-windows-msvc/share/doc目录

  • 将上面两个压缩包拷贝到开发电脑,解压到对应的home目录
  • 添加.cargo/bin目录到环境变量PATH(常规操作,没有不会的吧)

至此,基本环境已经好了,可以跑 Tauri 项目了

3.3 运行 Tauri 项目模版

  • 下载 Tauri 模版项目
npm create tauri-app@latest
  • 安装依赖
npm install
  • 运行项目
npm run tauri dev

4. Tauri 开发问题

4.1 前端开发模式

通常前后端开发是分离的,前端如何基于Tauri进行开发调试?

  • tauri.conf.json 中 build.devPath直接填上前端项目地址即可,比如:http://localhost:3000
  • 前端项目启动后,再运行 npm run tauri dev,编译完成后,会生成exe
  • 将 src-tauri/target/debug下面的exe拷贝给前端同事即可,前端同事就可以在本地启动exe,就能看到前端页面了,可以打开devtools进行调试
  • 如果需要打Release包,需要tauri.conf.json 中 build.distDir填上前端项目地址,同时在Cargo.toml加上devtools
[dependencies]
tauri = { version = "1", features = ["devtools"] }

4.2 跨域问题

如果使用传统的API请求包,都会面临跨域问题,跨域问题通常可以使用CORS机制来解决

ctx.set('Access-Control-Allow-Origin', ctx.headers.origin); // 编译生产版本时,origin改成 tauri://localhost
ctx.set('Access-Control-Allow-Methods', '*')
ctx.set('Access-Control-Allow-Headers', '*')
ctx.set('Access-Control-Allow-Credentials', 'true')
  • 如果需要编译Linux版本,那这种方式会有问题,因为Linux版本不支持ctx.headers.origin
  • 所以,最好还是使用Tauri的http包来进行API请求,这样就不存在跨域的问题了
  • Tauri http包 官方示例post请求有bug,如果跑不通,看下源码。。。
  • 使用http包记得加上权限
{tauri: {allowlist: {http: {all: true,request: true,scope: ["http://**"]}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

令牌和签名详细介绍+开发使用教程

令牌和签名简介 1. 令牌(Token) 概念 令牌(Token)是一个用于身份验证的小段数据,通常在用户登录时由服务器生成,并返回给客户端。客户端在后续的请求中将令牌附加到请求头中,服务器通过验证令…

鸿蒙 装饰器 @State、@Prop、@Link 等说明

首先要明白什么是“状态变量”?即被状态装饰器(@State、@Prop、@Link、@Provide、@Consume)修饰的变量,比如 @State str : string=; str就是状态变量。状态变量值的改变会引起UI界面重新渲染。 @State @State装饰的变量,是私有的,只能被组件内部访问,在声明时必须指定…

计算机视觉编程 1(图片处理)

目录 灰色度 缩略图 拷贝粘贴区域 调整图像尺寸 旋转图像45 画图线、描点 灰色度 灰度是指图像中每个像素的亮度值,用来描述图像中各个像素的明暗程度。在计算机视觉中,灰度可以通过以下方式来计算: 1. 平均值法:将图像中每…

【Linux】深入探讨Linux进程等待:`waitpid`与`wait`

文章目录 深入探讨Linux进程等待:waitpid与wait API一、waitpid与wait简介1. wait2. waitpid 二、waitpid与wait的实际应用1. 基本用法示例2. 使用 waitpid 处理多个子进程3. 非阻塞等待 三、使用场景 深入探讨Linux进程等待:waitpid与wait API 在Linux…

Java基础——自学习使用(泛型)

一、泛型的定义 泛型的本质是参数化类型,也就是所操作的数据类型被指定为一个参数。 泛型泛指一切类型,能够代表一切类型,是一种在编程中广泛使用的概念,特别是在面向对象编程中。它允许在编写代码时使用类型参数,这些…

WPS Office两个严重漏洞曝光,已被武器化且在野利用

WPS Office作为一款用户基数超过2亿的广泛使用的办公套件,被发现存在两个关键漏洞(CVE-2024-7262和CVE-2024-7263),这些漏洞可能导致用户遭受远程代码执行攻击。这两个漏洞的CVSS评分为9.3,表明它们的严重性很高&#…

C++:Opencv读取ONNX模型,通俗易懂

1. 准备 ONNX 模型 假设你已经有一个训练好的 ONNX 模型文件。可以从各类深度学习框架(如 PyTorch、TensorFlow)中导出 ONNX 模型。例如,下面是一个简单的 PyTorch 模型导出为 ONNX 文件的示例: import torch import torchvisio…

在使用React Hooks中,如何避免状态更新时的性能问题?

在React Hooks中避免状态更新时的性能问题,可以采取以下一些最佳实践: 避免不必要的状态更新: 使用React.memo、useMemo、和useCallback来避免组件或其子组件进行不必要的渲染。 使用useMemo: 对于基于状态或props的复杂计算&…

MES管理系统助力印刷企业实现智能化工艺流程

在印刷这一古老而充满活力的行业中,科技的浪潮正以前所未有的速度重塑着每一个生产环节。随着制造业数字化转型的深入,引入MES管理系统,为印刷企业带来了从原材料入库到成品出库的全流程智能化变革,不仅提升了生产效率&#xff0c…

剪辑小白必看:好用的剪辑工具推荐!

作为一位热爱创作的视频制作者,我尝试过不少剪辑软件,今天我想分享自己对福昕视频剪辑、爱拍剪辑、达芬奇和VSDC Video Editor这四款软件的使用体验。 福昕视频剪辑 链接:www.pdf365.cn/foxit-clip/ 我第一次接触到福昕视频剪辑是在朋友的…

python基础语法2

python基础语法2 了解整体内容可以从基础语法1开始,第2天了,开始上代码片段。 本篇主要内容:控制流语句if、for、match等。 打印及main方法 # 注释使用#号 #打印hello def print_hello(name):#这里加上f是打印变量内容,不加f打印…

树数据结构(Tree Data Structures)的全面指南:深度解析、算法实战与应用案例

树数据结构(Tree Data Structures)的全面指南:深度解析、算法实战与应用案例 引言 树数据结构(Tree Data Structures)作为计算机科学中的基石之一,以其独特的层次结构和分支特性,在众多领域发…

2012-2022年各省新质生产力匹配数字经济数据

2012-2022年各省新质生产力匹配数字经济数据 1、时间:2012-2022年 2、来源:各省年鉴、能源年鉴、工业年鉴、统计年鉴 3、指标:prov、year、gdp亿元、在岗职工工资元、第三产业就业比重、人均受教育平均年限、教育经费强度、在校学生结构、…

【STM32】IWDG独立看门狗与WWDG窗口看门狗

本篇博客重点在于标准库函数的理解与使用,搭建一个框架便于快速开发 目录 WDG简介 IWDG IWDG特性 独立看门狗时钟 键寄存器 超时时间 IWDG代码 WWDG WWDG特性 窗口看门狗时钟 超时时间 WWDG时序 WWDG代码 IWDG和WWDG对比 WDG简介 WDG(…

面经:什么是Transformer位置编码?

过去的几年里,Transformer大放异彩,在各个领域疯狂上分。它究竟是做什么,面试常考的Transformer位置编码暗藏什么玄机?本文一次性讲解清楚。 Transformer的结构如下: 可能是NLP界出镜率最高的图 Transformer结构中&a…

最大公约数(欧几里得算法)

欧几里得算法 只需要记住一个公式(不需要推导,这就是数论的基础知识): step1: 判断小括号内右边的数字 b 是否为0,如果为0,输出小括号左边的数字 a ,就是一开始要求的两个数的最大…

深度学习入门笔记

深度学习入门笔记 感知机逻辑与门与非门或门多层感知机异或门 神经网络激活函数输出层设计损失函数均方误差 MSE交叉熵误差 反向传播算法计算图局部计算计算图反向传播反向传播 参数更新训练过程总结 该篇文章为本人学习笔记的一部分。笔记基于《深度学习入门 基于python理论实…

49-结构化程序设计方法的理解

‌结构化程序设计方法‌是一种以提高程序可读性、易维护性、可调性和可扩充性为目标的程序设计方法。它基于模块化设计原则,将程序划分为多个功能模块,每个模块负责实现特定的功能。这种方法强调使用三种基本控制结构:顺序、选择和循环&#…

在Linux下搭建go环境

下载go go官网:All releases - The Go Programming Language 我们可以吧压缩包下载到Windows上再传到Linux上,也可以直接web下载: wget https://golang.google.cn/dl/go1.23.0.linux-amd64.tar.gz 解压 使用命令解压: tar -x…

关于前端布局的基础知识

float 横向布局 float 实现横向布局,需要向横着布局的元素添加float 其值left right 存在问题 如果使用float 所在父级五高度,会导致下方的元素上移 top的高度被吞了 解决方法: 给父级元素设置高度:不推荐,需要给父级…