使用 Tauri2.0 改造 Vue 项目

一、安装 WebView2 与 C++ 和 Rust

1. WebView2

方法 1：直接下载安装

1. 访问 Microsoft 官方下载页面： https://developer.microsoft.com/microsoft-edge/webview2/
2. 下载 "Evergreen Bootstrapper" 安装包：
   • 点击下载按钮，保存安装包。
3. 双击运行安装：
   • 下载完成后，双击安装包，按照提示完成安装。

方法 2：使用 winget

1. 打开命令提示符或 PowerShell：
   • 以管理员身份运行。
2. 运行以下命令：

   winget install Microsoft.EdgeWebView2Runtime

2. Visual Studio C++ 构建工具

方法 1：通过 Visual Studio Installer

1. 访问下载页面： https://visualstudio.microsoft.com/visual-cpp-build-tools/
2. 下载 "Build Tools for Visual Studio"：
   • 点击下载按钮，保存安装程序。
3. 运行安装程序：
   • 双击运行安装程序。
4. 选择 "Desktop development with C++" 工作负载：
   • 在安装选项中选择该工作负载。
5. 安装：
   • 按照提示完成安装。

方法 2：使用 winget

1. 打开命令提示符或 PowerShell：
   • 以管理员身份运行。
2. 运行以下命令：

   winget install Microsoft.VisualStudio.2022.BuildTools

3. Rust

方法 1：使用官方安装程序

1. 访问 Rust 官方安装页面： https://rustup.rs/
2. 下载并运行 rustup-init.exe：
   • 根据你的系统架构（32 位或 64 位）下载对应的安装程序。
3. 按照提示完成安装：
   • 运行安装程序，按照提示完成安装。

方法 2：使用 winget

1. 打开命令提示符或 PowerShell：
   • 以管理员身份运行。
2. 运行以下命令：

   winget install Rustlang.Rust.MSVC

安装完成后

• 建议重启电脑：以确保所有组件都正确配置。
• 验证安装：
  • 打开命令提示符或 PowerShell，运行以下命令：

    wv2 --version
    
    rustc --version

二、安装 Tauri CLI

npm

npm install -D @tauri-apps/cli@latest

pnpm

pnpm add -D @tauri-apps/cli@latest

三、修改 vite.config

import { defineConfig } from 'vite';

export default defineConfig({
  // ...其它配置
  // 防止 Vite 清除 Rust 显示的错误
  clearScreen: false,
  server: {
    // Tauri 工作于固定端口，如果端口不可用则报错
    strictPort: true,
    // 如果设置了 host，Tauri 则会使用
    host: host || false,
    port: 5173,
  },
  // 添加有关当前构建目标的额外前缀，使这些 CLI 设置的 Tauri 环境变量可以在客户端代码中访问
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    // Tauri 在 Windows 上使用 Chromium，在 macOS 和 Linux 上使用 WebKit
    target:
      process.env.TAURI_ENV_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',
    // 在 debug 构建中不使用 minify
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
    // 在 debug 构建中生成 sourcemap
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

四、初始化 Tauri 项目

npm

npx tauri init

pnpm

pnpm tauri init

五、运行开发服务器

npm

npx tauri dev

pnpm

pnpm tauri dev

六、报错问题

1. 使用以下命令查看信息：

   pnpm tauri info

2. 如果 rustup 是使用 stable-gnu 工具链的话，要改成使用 stable-msvc：

   rustup default stable-msvc

3. 要切回的话，使用以下命令：

   rustup default stable-gnu