Tauri+Vue3创建桌面应用

一、 Win10 下环境准备

• Node v14.18.2
• Yarn v1.22.19
• Visual Studio 下载
• Rust 下载
• WixTools 下载(打包最后一步要用到)，将其压缩包解压到

C:\Users\admin\AppData\Local\tauri (固定路径)

1. 创建 Vite 应用

• yarn create vite

• 安装好后浏览器运行

• 更新 vite.config.ts 内容

  import {
        
         defineConfig } from 'vite' export default defineConfig({
        
         
  // 防止 vite 输出复杂的 rust 错误 clearScreen: false, 
  // Tauri 使用固定端口，若此端口不可用将会导致程序错误 server: { strictPort: true, }, 
  // 使用`TAURI*PLATFORM`、`TAURI_ARCH`、`TAURI_FAMILY`,
  // `TAURI_PLATFORM_VERSION`、`TAURI_PLATFORM_TYPE`和`TAURI_DEBUG` 环境变量
  envPrefix: ['VITE*', 'TAURI\_'],
  build: {
        
        
  // Tauri 支持 es2021
  target: ['es2021', 'chrome100', 'safari13'],
  // 不为调试构建压缩构建体积
  minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
  // 为调试构建生成源代码映射 (sourcemap)
  sourcemap: !!process.env.TAURI_DEBUG,
  },
  })
  

2. 创建 Rust 项目

• yarn add -D @tauri-apps/cli
• 修改 src-tauri/tauri.conf.json

 "build": {
   // this command will execute when you run `tauri build`
   "beforeBuildCommand": "npm run build",
   // this command will execute when you run `tauri dev`
   "beforeDevCommand": "npm run dev",
   <!-- 端口号要和前端的一样 -->
   "devPath": "http://localhost:5173",
   "distDir": "../dist"
 },

• yarn tauri dev 运行
• 修改 package.json 启动命令，scripts 中
  加入:“tauri”: “tauri”
  • 显示 Updating crates.io index，等待
• 修改 vite 的启动端口号：
  • 在 vite.config.ts 中的 serve 上加入 port:端口号
  • 或者在 package.json 中加入–port 端口号
• 打包成 msi 文件（Windows）：
  • yarn tauri build

二、结果展示

• 打包后：
  • 在target目录下有release版本，
  • 运行tauri.exe，
  • 在\release\bundle\msi下有msi文件，可提供安装：
  •