离线环境玩转 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://**"
]
}
}
}
}