🚀 Windows环境下的Tauri项目启动指南：让你的开发过程更轻松！💻

上一篇文章我讲到我开源了一个即时通讯(IM)应用 🎉 HuLa ✨ ,该应用是使用 tauri + vue3 来开发的，今天我来讲一下在windows环境下如何启动该项目吧😎

HuLa 启动！！！

首先我们先根据当前网络环境去选择下载的地址，我在gitee和github上都同步更新了最新的代码仓库，可自行选择

如果你想帮助我改进 HuLa 项目的话，我们直接git clone 代码到本地是不能 push 的，所以我们使用fork ，先把代码复制到自己的github仓库，然后git clone 到本地修改哦，然后在提交push （这里的 push 是 push 到自己 github 仓库了，我们自己的 github 仓库中的代码是 fork 源的一个分支），这时候我们想要把修改的代码提交给他人的话，就可以在自己github上 push ，等其他人看到后就可以把代码做一个合并

很好现在我想直接 git clone 到本地🐶：

shell 复制代码

git clone https://gitee.com/nongyehong/HuLa-IM-Tauri

因为使用tauri ，tauri 又使用 rust 来开发，所以我喜欢用jetbrains 的RustRover ，现在还是EAP 版本可以免费使用所以修改代码起来也方便，如果要使用vscode 的话可以安装rust 插件来给相应的代码高亮和提示，不过我项目中使用Naive UI ，vscode 中Naive UI 的插件提示有点不太智能，所以还是使用RustRover 比较高效，而且我项目中使用的flex布局 也是使用Naive UI 中的flex组件 ，使用RustRover 或者WebStorm 写起来是非常爽的，并且还使用了UnoCSS ,相对应的WebStorm 中也有UnoCSS的插件，并且提示也很好。

克隆代码到本地后我们可以使用：

shell 复制代码

pnpm install

来进行依赖的安装，因为进行包管理器的限制，所以只可以使用pnpm来进行依赖安装，并且限制了版本：

json 复制代码

"engines": {
  "node": ">=18.12.0",
  "pnpm": ">=8.10.0"
},

很好当我们安装了依赖完毕后，可以在命令行输入：

shell 复制代码

pnpm run tauri:dev
或者
pnpm tauri dev
前者是为了在jetbrains的编辑器中可以使用点击按钮可以启动来写的一个scripts脚本

项目启动会报一个警告：

只是我在项目中启用了vue3中的实验性功能，开启defineProps解构功能，该功能还是实验性的所以使用起来可能会有其他的问题

这时候没出什么问题就没有太大的问题啦，项目启动完毕🎉：

该项目建议在win11 系统下运行效果最佳，因为本人是在win11 下开发的，win10 开启了透明窗体效果后拖动窗口会有延迟效果，这个问题是因为使用了官方的 window-vibrancy 插件，该插件主要是做窗体透明磨砂效果的，但是在win10 下拖动会有延迟，后面在版本迭代中会考虑在win10 环境下不启用窗口透明磨砂效果

注意：暂时还未在macOS系统下运行测试过，并且顶部的操作栏还是沿用window的操作栏，后续会进行改进

🎉恭喜你✨，你已经成功启动了 HuLa | Tauri 项目！如果你遇到任何问题，可以查阅项目的文档，或者在GitHub上提交一个issue。

如何把HuLa项目或者其他的Tauri项目打包呢

当然就是直接运行下面：

shell 复制代码

(打包开发环境)
pnpm run build:dev
(打包生产环境)
pnpm run build:prod

等会，好像我没有跟你们说要是你系统中没有安装rust环境很大可能是启动不了tauri项目的(一定启动不了)，所以如果没有安装rust环境先赶紧按照下面的指示安装起来

直接上链接！！

预先准备 | Tauri Apps

很好，如果你在看这篇文章的时候已经对tauri的项目非常熟悉了，那应该就不用看了🐶

打包的时候可能还会遇到以下的包没有下载导致的报错：

手动下载文件，并解压到C:\Users\你的用户名\AppData\Local\tauri\WixTools下，

下载地址 github.com/wixtoolset/...

对应源代码地址为
github.com/tauri-apps/...
github.com/tauri-apps/...

注意！！！

msi.rs中 WIX_REQUIRED_FILES 会检查这里的文件是否存在，不存在会删除文件重新下载。接下来的nsis也是同样的问题

nsis

手动下载文件nsis 解压到C:\Users\你的用户名\AppData\Local\tauri\NSIS

下载地址 github.com/tauri-apps/...

对应源码地址
github.com/tauri-apps/...

NSIS这里检测的文件有两个插件是不包含在nsis-3.zip中的

shell 复制代码

  "Plugins/x86-unicode/ApplicationID.dll",
  "Plugins/x86-unicode/nsis_tauri_utils.dll",

源码中给到了这两个文件的下载地址

shell 复制代码

const NSIS_APPLICATIONID_URL: &str = "https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip";
const NSIS_TAURI_UTILS: &str =
  "https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.1.1/nsis_tauri_utils.dll";

如果检测到没有这两个文件，就会删除NSIS文件夹，从头开始下载，这两个文件按照上边给到的位置放进去就可以了

更多可看： github.com/tauri-apps/...

最后

HuLa项目的技术栈：

依赖	版本
Vue	v3.4.21
NaiveUI	v2.38.1
UnoCSS	v0.58.7
Vite	v5.2.8
Sass	v1.71.1
Tauri	v1.6.1