tauri开发环境搭建

一、系统依赖安装

需要安装3个系统依赖

MSVC

Windows SDK

WebView2

1.MSVC+Windows SDK 安装

MSVC和Windows SDK可以通过 VS生成工具安装和或者msvc-kit工具安装

（1）.VS生成工具安装

打开https://visualstudio.microsoft.com/zh-hans/downloads/

找到所有下载-->用于Visual Studio的工具-->Visual Studio20XX 生成工具-->点击下载即可

或者用这个链接直达下载 https://aka.ms/vs/stable/vs_BuildTools.exe

下载后安装勾选 MSVC 最新版和 windows sdk 最新版即可

但是这个安装经常遇到通道未配置的问题，这时我们可以换一种方式

（2）.msvc-kit工具安装

安装msvc-kit

cmd命令执行

复制代码

winget install loonghao.msvc-kit

上述msvc-kit安装完后执行

复制代码

msvc-kit download --target D:\msvc-kit

安装预估耗时约1小时

设置环境变量

复制代码

msvc-kit setup -d D:\msvc-kit --script --shell cmd > setup.bat && setup.bat

测试命令

复制代码

# 检查 cl.exe 是否可用
cl /?

# 检查版本
cl
# Microsoft (R) C/C++ Optimizing Compiler Version 19.xx.xxxxx for x64

2.WebView2安装

下载页：https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

引导安装程序链接：https://go.microsoft.com/fwlink/p/?LinkId=2124703

安装需要管理员权限

验证

查看目录C:\Program Files (x86)\Microsoft\EdgeWebView\Application 是否存在数字版本号

二、语言工具安装

1.node

这里可以安装node或者nvm

node下载地址：Node.js --- 下载 Node.js®

nvm 下载地址：Releases · coreybutler/nvm-windows

安装完成验证

复制代码

node -v
npm -v

2.rust

rust下载地址 https://static.rust-lang.org/rustup/dist/x86_64-pc-windows-msvc/rustup-init.exe

安装时更换路径

复制代码

rmdir /s /q C:\Users\Administrator\.rustup
rmdir /s /q C:\Users\Administrator\.cargo

重新打开一个cmd

复制代码

# 设置 Rust 公共安装目录（你可以改成 D 盘）
setx CARGO_HOME "D:\rust\cargo" /m
setx RUSTUP_HOME "D:\rust\rustup" /m

然后重新运行 rustup-init.exe安装当中若发现路径不对，则再开一个cmd

由于我们之前安装过MSVC依赖

第一步提示时

复制代码

These components can be acquired through a Visual Studio installer.

1) Quick install via the Visual Studio Community installer
   (free for individuals, academic uses, and open source).

2) Manually install the prerequisites
   (for enterprise and advanced users).

3) Don't install the prerequisites
   (if you're targeting the GNU ABI).

>3 这里输入3回车

第二步提示时

复制代码

  modify PATH variable: yes

1) Proceed with standard installation (default - just press enter)
2) Customize installation
3) Cancel installation
>3 这里输入1回车安装

会下载6个组件

复制代码

cargo clippy rust-docs rust-std rustc rustfmt

安装预估耗时1小时

也可以使用离线安装工具

https://forge.rust-lang.org/infra/other-installation-methods.html#standalone

找到x86_64-pc-windows-msvc 对应的msi 安装

安装完成验证

复制代码

rustc --version
cargo --version

若不生效，需要将D:\rust\cargo\bin目录加到path环境变量

三、工程初始化

初始化tauri+rust+vue项目 npm命令版

复制代码

# 安装脚手架
npm install -g @tauri-apps/cli

# 创建项目
npm create tauri-app@latest
Need to install the following packages:
create-tauri-app@4.6.2
Ok to proceed? (y) y


> npx
> create-tauri-app

✔ Project name · tauri-app-project-study
✔ Identifier · com.tauri-app.tauri-app-project-study
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-app-project-study
  npm install
  npm run tauri android init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

项目开发启动

复制代码

# 进入项目
cd tauri-app-project-study

# 安装依赖
npm install

# 启动开发
npm run tauri dev

初始化tauri+rust+vue项目 cargo命令版

复制代码

# 安装脚手架
cargo install create-tauri-app --locked

# 创建项目
cargo create-tauri-app

✔ Project name · tauri-app-project-study
✔ Choose your package manager · npm
✔ Choose your UI template · vue-ts

Please follow https://tauri.app/v1/guides/getting-started/prerequisites to install the needed prerequisites, if you haven't already.

Done, Now run:
  cd tauri-app-project-study
  npm install
  npm run tauri dev

项目开发启动

复制代码

cd tauri-app-project-study
npm install
npm run tauri dev

四、工程打包成exe

复制代码

cd tauri-app-project-study
npm run tauri build

生成的文件在

复制代码

你的项目\src-tauri\target\release\bundle

五、vscode环境配置

1.修改插件位置

设置环境变量

复制代码

变量名：VSCODE_EXTENSIONS
变量值：D:\VSCodeExtensions

2.常用插件

rust-analyzer (Rust 官方必装)

Vetur 或 Vue - Official (volar)

Tauri （官方插件）

Even Better TOML

3.VSCode 必须的项目配置

按 Ctrl + Shift + P → 输入 Preferences: Open Settings (JSON)

复制代码

{
    // ==================== RUST 配置 ====================
    "rust-analyzer.checkOnSave": true,
    "rust-analyzer.formatOnSave": true,
    "rust-analyzer.cargo.buildScripts.enable": true,
    "rust-analyzer.procMacro.enable": true,

    // ==================== VUE 配置 ====================
    "vue.formatOnSave": true,
    "editor.formatOnSave": true,

    // ==================== TAURI 开发优化 ====================
    "tauri.devServerEnabled": true,
    "files.associations": {
        "*.rs": "rust",
        "Cargo.toml": "toml"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4.快捷键

常用调试快捷键

复制代码

Ctrl + Shift + B：运行构建
Ctrl + Alt + N：运行 dev
F5：调试 Rust

六、一些软件包镜像配置

Cargo 镜像

cargo目录创建config.toml

内容如下

复制代码

[source.crates-io]
replace-with = 'ustc'
[source.ustc]
registry = "sparse+https://mirrors.ustc.edu.cn/crates.io-index/"

npm镜像

执行命令

复制代码

npm config set registry https://registry.npmmirror.com/

tarui镜像

复制代码

set TAURI_BUNDLER_TOOLS_GITHUB_MIRROR=https://ghproxy.com/https://github.com/