tauri实用教程【前置】拥抱Rsbuild，加快编译速度

为了加快构建速度，将vite替换成基于 Rust 的高性能工具Rsbuild

Rsbuild 介绍https://rsbuild.dev/zh/guide/start/

由于tauri并没有原生自带rsbuild构建，因此需要先创建一个tauri标准工程。在开始之前我默认大家应该安装了对应的包管理工具，以及相关的IDE。

首先，在tauri官网选择自己习惯的方式，我这里习惯yarn所以在终端中（在这里推荐一个非常不错的终端工具Nushell）输入

yarn create tauri-app

输入后需要填写工程名称我这里使用test

接着需要填写标识名称，这个名称不能使用默认的，否则无法构建安装包，同样的名称格式也有要求（a-z，0-9，-）这些，其他的同样会导致报错

选择前端使用的语言，推荐还是选择前面的，后面两个轮子过少，特别是第三个dotnet。

选择包管理器，我依旧选择习惯的yarn

然后需要选择UI模板，我这里就选用得比较多的Vue了

选择语言

这样子就算标准工程构建完成了

  cd test
  yarn
  yarn tauri dev

先运行一下看看(构建编译过程所花费时间较长)

好了，关闭这个程序，现在开始移植Rsbuild，使用Vscode打开我们刚刚创建的工程，目录大致如下

主要需要了解的是，

前端文件都在src下

而后端文件都在src-tauri下

同时也可以看到自动生成了.vscode文件，带了推荐安装的扩展，

自动生成的.gitignore文件，防止提交构建输出目录

这里只是教怎么去移植rsbuild所以文件内不会去涉及，后面教程会一一讲解

首先需要将没用的文件删除

在本目录下需要删除

vite.config.ts
tsconfig.node.json
index.html

删除完成后应该只有这么多文件

然后新建一个文件rsbuild.config.ts

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
    plugins: [pluginVue()],
});

接着修改package.json文件

// package.json
{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview",
    "tauri": "tauri"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "@tauri-apps/api": "^1"
  },
  "devDependencies": {
    "@rsbuild/core": "^0.4.7",
    "@rsbuild/plugin-vue": "^0.4.7",
    "typescript": "^5.3.0",
    "vue-tsc": "^1.8.5",
    "@tauri-apps/cli": "^1"
  }
}

这样就完成了

然后进入src文件夹，删除以下文件

main.ts
vite-env.d.ts

删除之后如下

然后新建index.ts文件夹

// index.ts
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#root');

接着新建index.css文件夹（可以不添加，这里只是让边框置零而已）

// index.css
body {
  margin: 0;
  color: #fff;
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  background-image: linear-gradient(to bottom, #020917, #101725);
}

新建index.ts文件夹(之后需要全局引入库都放这里)

// index.ts
import './index.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#root');

然后再修改App.vue文件（不改也行）

// App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Greet from "./components/Greet.vue";
</script>

<template>
  <div class="content">
    <h1>Rsbuild with Vue</h1>
    <p>Start building amazing things with Rsbuild.</p>
    <Greet />
  </div>
</template>

<style scoped>
.content {
  display: flex;
  min-height: 100vh;
  line-height: 1.1;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}

.content h1 {
  font-size: 3.6rem;
  font-weight: 700;
}

.content p {
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 0.5;
}
</style>

接着退出当前文件夹，再来到后端的src-tauri文件夹下

将tauri.conf.json文件内的devPath改为8080端口

// tauri.conf.json
{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build",
    "devPath": "http://localhost:8080",
    "distDir": "../dist"
  },
  "package": {
    "productName": "test",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      }
    },
    "windows": [
      {
        "title": "test",
        "width": 800,
        "height": 600
      }
    ],
    "security": {
      "csp": null
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "test",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

好了，到这里就已经全部移植完成了

现在构建一下试试,在vscode中按ctrl+`快捷键打开终端，输入以下

yarn
yarn tauri dev

可以看到已经是rsbuild构建了

第一次编译时间会比较久，后面就快了

到这里就已经全部完成了，构建速度肉眼可见的提升。