标签： tauri

Tauri是一个取代Electron的方案，而且比Electron应用方面更广，马上也可以用来创建手机应用，而且架构使用rust作为后端，不嵌入chromium的方式也大大减小app的体积和占用的内存。

简单用一个实例说明如何使用react项目构建一个Tauri App，只需要很短的时间就可以完成此教程。

预先安装

需要先安装好npm、cargo等运行环境，参考 https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites

安装tauri-cli

cargo install tauri-cli

创建react项目

如果已有react项目可以略过这一步

npx create-react-app hello-tauri-react

创建Tauri app

cd hello-tauri-react # 进入react项目的路径中

cargo tauri init

这里会问你6个问题，作为配置写在生成好的tauri.conf.json文件里，结束后会为你创建 src-tauri文件夹

第五个问题问你如何启动前端环境，因为是用CRA创建的项目，因此应该是 npm start

其余问题保持原样就可以

启动测试环境

cargo tauri dev

这里它会先启动react环境，再启动app客户端，当你看到这个界面，就是成功了

你会注意到，浏览器窗口自动弹起来是不必要的，打开tauri.conf.json文件，修改 build -> beforeDevCommand

"beforeDevCommand": "BROWSER=none npm start",

这样下次启动的时候就不会再打开浏览器窗口了

发布打包

cargo tauri build

会报一个错误

`com.tauri.dev` is not allowed as it must be unique across application

就是说app的id标识符不让你用com.tauri.dev这个名字，在tauri.conf.json 中找到 tauri -> bundle -> identifier 随便改成你自己想取的名字，再运行

cargo tauri build

Bingo！现在应该可以发布的app生成好了，我是mac系统，文件生成在 src-tauri/target/release/bundle/ 中 pkg是打包后的，macos里有可运行的app，它还帮你生成了安装包，真的是很愉快的开发体验！