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