Create desktop application with Tauri+Vue3

1. Environment preparation under Win10

• Node v14.18.2
• Yarn v1.22.19
• Visual Studio Downloads
• Rust download
• Download WixTools (used in the last step of packaging), unzip its compressed package to

C:\Users\admin\AppData\Local\tauri (fixed path)

1. Create a Vite application

• yarn create vite

• After installation, the browser runs

• Update vite.config.ts content

  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. Create a Rust project

• yarn add -D @tauri-apps/cli
• Modify 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 run
• Modify package.json startup command,
  add in scripts: "tauri": "tauri"
  • Show Updating crates.io index, wait
• Modify the start port number of vite:
  • Add port: port number to serve in vite.config.ts
  • Or add –port port number in package.json
• Packaged into msi file (Windows):
  • yarn tauri build

2. Results display

• After packaging:
  • There is a release version in the target directory,
  • run tauri.exe,
  • There are msi files under \release\bundle\msi, which can provide installation:
  •