hello tauri

Tauri 项目创建

官网
Youtube

移除淘宝的 npm 源

不要使用淘宝的 npm 源

查看是否使用的 npm 源为淘宝 npm config get registry

恢复 npmjs 源 npm config set registry https://registry.npmjs.org

检查是否恢复成功 npm config get registry

创建 reactjs 项目

npx create-react-app hello-tauri

按照 开发依赖包 @tauri-apps/cli

yarn add -D @tauri-apps/cli cross-env
# or
npm i -D @tauri-apps/cli cross-env

测试应用是否运行正常

npm start

按照依赖 @tauri-apps/api

yarn add @tauri-apps/api
# or
npm i @tauri-apps/api

初始化 tauri 项目

yarn tauri init
# or
npm run tauri init

What is your app name? · hello-tauri
✔ What should the window title be? · hello-tauri
? Where are your web assets (HTML/CSS/JS) located, relative to the “/src-tauri/tauri.conf.json” file that will be created? (../build)
✔ Where are your web assets (HTML/CSS/JS) located, relative to the “/src-tauri/tauri.conf.json” file that will be created? · ../build
✔ What is the url of your dev server? · http://localhost:3000

修改 src-tauri 目录下的 tauri.conf.json 配置文件

{
  "build": {
    "beforeBuildCommand": "yarn build",
    "beforeDevCommand": "yarn cross-env BROWSER=none yarn start",
    "devPath": "http://localhost:3000",
    "distDir": "../src"
  }
}

检查 tauri 设置是否正确

yarn tauri info
# or
npm run tauri info

运行应用

停止前面 npm start 运行的进程, 运行下面命令，然后耐心等待（第一次时间很长）。

yarn tauri dev
# or
npm run tauri dev

编译打包

修改应用的包名 tauri.conf.json > tauri > bundle > identifier 为你的自定义包名，否则不可以编译打包

yarn tauri build