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