当前位置： 前端网络调试工具-前端自动化部署工具
一起创造，一起成长！今天是我参加“掘金每日新项目·八月更新挑战赛”的第27天，点击查看活动详情
什么是金牛座？
Tauri 是一款基于 Rust 的跨端桌面应用开发工具。 仍然可以使用前端开发应用程序的界面。 您可以使用原生 HTML、CSS、JS 或 React 和 Vue 等前端框架。 这不是限制性的。
与 Electron 相比，它的突出优势是体积小。 众所周知，Electron相当于封装了一个小型浏览器，体积大，占用内存。 Tauri开发的应用，前端使用操作系统的webview，后端集成了Rust，使得打包后的体积相当小。 有人对比了同样的Hello World程序的封装。 Electron 打包的应用大约有 50 MB，而 Tauri 的大小只有 4 MB。
本文将演示如何在windows平台下创建一个Tauri项目并打包成一个应用程序。 由于我还没有掌握Rust，示例应用程序没有演示后端部分的开发。
示例代码在这里，点击访问。
环境准备（Windows）Rust
Tauri依赖Rust前端网络调试工具，可以参考我的文章《Rust安装与Hello World》安装Rust。 也可以阅读官方文档《准备》。 具体步骤不再赘述。
Microsoft Visual Studio C++ 构建工具
当您在其上安装 Rust 时，它会自动安装。 没有更多的演示。
WebView2
Tauri 在 WebView2 的帮助下在 Windows 上呈现网页内容。 我使用的是预装了 WebView2 的 Windows 11。 对于 Windows 10，您可以从 Windows 10 下载并运行常绿版本的引导加载程序，它会自动为您的系统下载合适的版本。
创建项目 使用脚手架创建项目
官方文档推荐使用create-tauri-app脚手架创建Tauri项目，支持原生HMTL/CSS/Javascript，也支持其他前端框架，如React、Vue、Svelte。 文档推荐使用 Vite 构建前端应用。
我们使用 pnpm 创建项目：
pnpm create tauri-app
复制代码如果你使用的是 npm 或 yarn，你可以像这样创建一个项目：
npm create tauri-app
# or
yarn create tauri-app
复制代码在创建过程中，会提示您输入项目名称并选择包管理工具。 其中cargo是rust的包管理工具。 我们可以选择我们熟悉的：
然后选择一个UI模板，这里我们选择使用vue：
项目创建完成后，进入项目目录，安装依赖：
安装依赖后，启动项目：
pnpm tauri dev
复制代码这个命令会先执行pnpm dev，也就是启动一个vite脚手架对页面进行前端：
编译大约3分钟后，Rust后端程序也启动了，会自动弹出Tauri应用：
Tauri 项目目录结构
项目创建完成后，进入项目目录可以看到其结构。
其实就是在Vite脚手架创建的Vue项目中插入一个Rust后端程序。
Vue部分不用多说，我们来看Rust部分：
发展
在熟悉了 Tauri 应用的基本结构之后，我们来实现一个简单的 todo 应用。
安装组件库
我们导入 Element Plus 组件库并使用它的 ElButton 组件和 ElInput 组件。
pnpm add element-plus
复制代码您还需要使用 Element Plus 提供的图标：
pnpm add @element-plus/icons-vue
复制代码配置组件的按需导入：
pnpm add -D unplugin-vue-components unplugin-auto-import
复制代码vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
// ......
})
复制代码安装 Sass
安装另一个 Sass 预处理器：
pnpm add sass
复制代码写一个待办事项
直接在App.vue中实现：
<script setup>
import { ref } from 'vue';
import { Close } from '@element-plus/icons-vue'
let id = 0
const todosList = ref([])
const text = ref('')
const onAddTodo = () => {
todosList.value.push({
id: id++,
text: text.value
})
}
const onComplete = index => {
todosList.value.splice(index, 1)
}
script>
<template>
<div class="todo-container">
<h1>Todo Listh1>
<div class="head">
<el-input type="text" v-model="text">el-input>
<el-button @click="onAddTodo" type="primary">添 加el-button>
div>
<div class="list" v-if="todosList.length">
<ul>
<li v-for="(todo, index) in todosList" :key="todo.id">
<span>{{ index + 1 }}. span>
<span>{{ todo.text }}span>
<el-icon :size="16" color="gray" @click="onComplete(index)" style="cursor: pointer;">
<Close />
el-icon>
li>
ul>
div>
div>
template>
复制代码效果预览：
调试
调试和开发前端应用一样，按F12打开开发者工具进行调试。
盒
在命令中执行打包命令：
pnpm tauri build
复制代码会报错：
提示我们修改identifier的值，打开tauri.conf.json进行修改。
原本的：
"identifier": "com.tauri.dev",
复制代码变成：
"identifier": "com.tauri.build",
复制代码然后再次执行打包命令。 这时候就可以正常打包了，大概需要三五分钟的时间：
打包后需要从Github下载一个wix3程序来构建.msi格式的安装包。 大小为 33.1 MB。 由于网络状况，下载会很慢，大概率下载不下来。
提前下载好（点此下载），将解压后的内容放在C:\Users\用户名\AppData\Local\tauri\WixTools目录下。
然后再次执行打包命令：
生成的安装包会放在项目的src-tauri/target/release/bundle/msi目录下，体积很小：
双击安装使用：
概括
至此，我们就体验了使用Tauri开发桌面应用的过程。 可以看出它对前端开发者非常友好，但是想要深入掌握，就必须学习Rust，增加了学习成本。 与 Electron 相比，这是一个缺点。 它的优点不用多说，得益于Rust，体积小，性能好前端网络调试工具，安全性高。
上一篇 
