Vite创建Vue + Tauri项目

环境准备

确保已安装:

• Node.js (推荐 v20.19.0 或更高版本)
• Rust (通过 rustup 安装)

1. 创建Vue项目

使用Vite初始化Vue项目:

cnpm create vite@latest yourRepoName

完整输出示例:

Need to install the following packages:
  create-vite@7.0.3
Ok to proceed? (y) y

✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /path/to/yourRepoName...

Done. Now run:

  cd yourRepoName
  npm install
  npm run dev

2. 安装Tauri依赖

进入项目目录并安装Tauri CLI:

cd yourRepoName
cnpm install -D @tauri-apps/cli@next

3. 初始化Tauri配置

运行初始化命令:

npx tauri init

完整交互过程:

✔ What is your app name? · yourAppName
✔ What should the window title be? · yourAppName
✔ Where are your web assets located? · ../dist
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build

4. 安装项目依赖

cnpm install

5. Rust镜像配置(可选)

对于国内用户，可以设置Rust镜像加速:

# Windows PowerShell
$ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static'
$ENV:RUSTUP_UPDATE_ROOT='https://mirrors.ustc.edu.cn/rust-static/rustup'

# Linux/macOS
export RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static
export RUSTUP_UPDATE_ROOT=https://mirrors.ustc.edu.cn/rust-static/rustup

项目结构说明

初始化完成后，典型项目结构如下:

yourRepoName/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   └── App.vue
├── src-tauri/
│   ├── Cargo.toml
│   ├── tauri.conf.json
│   └── src/
│       └── main.rs
├── package.json
├── tsconfig.json
└── vite.config.ts

常用命令

开发模式:

npm run dev

构建Web应用:

npm run build

构建Tauri应用:

npx tauri build

首次可能很慢，因为需要下载Rust工具链。

注意事项

1. 确保Node.js版本符合要求
2. 首次构建可能需要较长时间下载Rust工具链
3. 如果遇到网络问题，建议配置国内镜像源
4. 开发时保持前端开发服务器运行(npm run dev)