vue项目使用tauri打包rust软件

以下是将现有 Vue 3 (JavaScript) 项目迁移到 Tauri 的完整步骤，结合官方实践和最佳方案整理而成：

---

🔧 ​​一、环境准备​​

1. ​​安装 Rust​​ (Tauri 底层依赖)

   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

   安装后重启终端，运行 rustc --version 验证 。

2. ​​安装 Tauri CLI​​

   npm install @tauri-apps/cli --save-dev

   或全局安装：

   npm install @tauri-apps/cli -g

---

⚙️ ​​二、整合 Tauri 到 Vue 项目​​

1. ​​初始化 Tauri 配置​​
   在 Vue 项目根目录执行：

   npx tauri init

   • ​​配置选项参考​​：
     • App name：项目名称（英文）
     • Window title：窗口标题
     • ​​前端资源路径​​：../dist (Vue 打包输出目录)
     • 开发服务器 URL：http://localhost:5173 (需与 vite.config.js 的端口一致)
     • 前端开发命令：npm run dev

2. ​​目录结构变化​​
   生成 src-tauri 目录，包含：

   • tauri.conf.json：主配置文件
   • main.rs：Rust 入口文件
   • 图标资源文件夹

---

⚙️ ​​三、关键配置调整​​

1. ​​修改 tauri.conf.json​​
   调整以下字段确保加载 Vue 资源：

   {
     "build": {
       "beforeDevCommand": "npm run dev", // 开发模式启动前端
       "beforeBuildCommand": "npm run build", // 构建前打包前端
       "devPath": "http://localhost:5173", // 开发环境路径
       "distDir": "../dist" // 生产环境打包目录
     },
     "tauri": {
       "allowlist": {
         "all": true // 临时启用所有API（安全需优化）
       },
       "windows": [
         {
           "title": "My App", // 窗口标题
           "width": 800,
           "height": 600,
           "resizable": true
         }
       ]
     }
   }

   💡 提示：生产环境建议按需启用 API（如 fs、shell），缩小体积 。

2. ​​解决跨域问题​​ (若需访问外部 API)
   在 tauri.conf.json 添加白名单：

   "allowlist": {
     "http": {
       "scope": ["https://api.example.com/*"]
     }
   }

---

🚀 ​​四、开发与调试​​

1. ​​启动开发环境​​

   npm run tauri dev

   • 自动启动 Vue 开发服务器 + Tauri 窗口
   • 实时热更新前端代码

2. ​​调用 Rust 方法示例​​
   ​​步骤 1：Rust 暴露接口​​ (src-tauri/main.rs)

   #[tauri::command]
   fn greet(name: &str) -> String {
       format!("Hello, {}!", name)
   }
   
   fn main() {
       tauri::Builder::default()
           .invoke_handler(tauri::generate_handler![greet])
           .run(tauri::generate_context!())
           .expect("运行失败");
   }

   ​​步骤 2：前端调用​​ (Vue 组件)

   import { invoke } from '@tauri-apps/api'
   
   const sayHello = async () => {
     const msg = await invoke('greet', { name: 'Vue' })
     console.log(msg) // 输出 "Hello, Vue!"
   }

---

📦 ​​五、打包发布​​

1. ​​生产环境构建​​

   npm run tauri build

   • 自动执行 npm run build 打包 Vue
   • 生成安装包路径：src-tauri/target/release/
   • 支持平台：Windows (.msi), macOS (.app), Linux (.deb)

2. ​​优化体积​​ (关键配置)
   在 tauri.conf.json 添加：

   "build": {
     "withGlobalTauri": true // 启用 Tree Shaking
   },
   "bundle": {
     "resources": ["icons"] // 仅包含必要资源
   }

   ⚡ 效果：基础应用体积可压缩至 1.8~3 MB（Electron 通常 >100MB）。

---

⚠️ ​​六、常见问题解决​​

问题	解决方案
启动后窗口空白	检查 devPath 和端口是否匹配 Vue 开发服务器
点击事件无响应	确认 @tauri-apps/api 已安装 (npm install @tauri-apps/api)
打包时下载依赖失败	切换 Rust 国内镜像：export RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static
防病毒软件误报	签名应用（推荐）或添加白名单

---

注意package.json文件中添加

"tauri:dev": "tauri dev",
"tauri:build": "tauri build"

 

💎 ​​最佳实践建议​​

1. ​​安全优先​​：生产环境按需启用 allowlist API，例如仅开放必要文件路径：

   "fs": {
     "scope": ["$APPDATA/*"]
   }

2. ​​异步优化​​：耗时 Rust 操作使用 std::thread::spawn 避免阻塞前端 。
3. ​​更新策略​​：集成 Tauri 自更新模块 (tauri-plugin-updater)，简化客户端升级流程。

完成以上步骤后，你的 Vue 3 项目即可作为轻量级桌面应用运行。如需扩展后端功能（如文件操作、系统调用），可进一步学习 Rust 与 Tauri 的深度交互 。