首页 前端知识 Windows环境下的Tauri项目启动指南:让你的开发过程更轻松!

Windows环境下的Tauri项目启动指南:让你的开发过程更轻松!

2024-08-19 22:08:16 前端知识 前端哥 149 458 我要收藏

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

HuLa 启动!!!

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

github地址:https://github.com/nongyehong/HuLa-IM-Tauri

gitee地址:HuLa-IM-Tauri: Tauri+vue3+vite5开发的IM项目(前端)

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

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

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

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

首先我们需要安装rust环境:

可以按照Tauri文档中的来进行安装https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites

推荐!!! 也可以参考下面的安装步骤文档来操作:https://blog.csdn.net/xinyingzai/article/details/135459640

安装成功后查看rust版本,验证是否安装rust环境成功

rustc -V

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

pnpm install

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

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

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

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项目打包呢

当然就是直接运行下面:

pnpm run tauri:build

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

手动下载文件,并解压到C:\Users\你的用户名\AppData\Local\tauri\WixTools下,
下载地址 https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip
对应源代码地址为
https://github.com/tauri-apps/tauri/blob/dev/tooling/bundler/src/bundle/windows/msi/wix.rs#L33
https://github.com/tauri-apps/tauri/blob/dev/tooling/bundler/src/bundle/windows/msi.rs#L28

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

nsis
手动下载文件nsis 解压到C:\Users\你的用户名\AppData\Local\tauri\NSIS
下载地址 https://github.com/tauri-apps/binary-releases/releases/download/nsis-3/nsis-3.zip
对应源码地址
https://github.com/tauri-apps/tauri/blob/dev/tooling/bundler/src/bundle/windows/nsis.rs#L47

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

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

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

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文件夹,从头开始下载,这两个文件按照上边给到的位置放进去就可以了

更多可看: https://github.com/tauri-apps/tauri/issues/7338

最后

HuLa项目的技术栈:

依赖版本
Vuev3.4.37
NaiveUIv2.39.0
UnoCSSv0.60.9
Vitev5.4.0
Sassv1.77.6
Tauriv2-rc
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16192.html
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!