Tauri+Dotnet+Vue3+Vite桌面应用程序创建

环境需求

• Node.js (已安装)
• Rust (安装 Rust，必要)
• .NET Core SDK (用于后端)
• Tauri CLI (通过 Rust 安装)

---

1. 创建 Vue 3 + Vite 前端项目

1. 初始化项目：bash复制代码

npm create vite@latest tauri-vue3-dotnet --template vue cd tauri-vue3-dotnet

1. 安装必要依赖：bash复制代码

   npm install

2. 启动开发服务器，确认项目正常运行：bash复制代码npm run dev 访问 http://localhost:5173，确保前端环境已搭建成功。

---

2. 添加 Tauri 支持

1. 安装 Tauri CLI 和前端依赖： 在项目中安装 Tauri 所需的依赖：bash复制代码

   npm install @tauri-apps/cli @tauri-apps/api

2. 初始化 Tauri：

   npx tauri init 

   配置选项：

• What is your app name?输入：项目名

• What should the window title be? 输入：窗口上展示的title名称

• Where are your web assets (HTML/CSS/JS) located, relative to the "/src-tauri/tauri.conf.json" file that will be created? 输入：“../dist”

• What is the url of your dev server? 输入：http://localhost:5173 这个是前端vue的启动地址

• What is your frontend dev command? 输入：npm run dev 这个是启动tauri的命令

---

3. 创建 .NET Core 后端

在 src-tauri 文件夹中添加 .NET Core Web API 后端。

1. 创建 .NET Core Web API：bash复制代码

   cd src-tauri dotnet new webapi -n Backend

2. 配置跨域支持： 编辑 Program.cs，允许跨域访问（来自前端）：csharp复制代码

   var builder = WebApplication.CreateBuilder(args); 
   builder.Services.AddControllers(); 
   builder.Services.AddCors(options => { 
   options.AddPolicy("AllowFrontend", policy => { 
   policy.AllowAnyHeader() .AllowAnyMethod() .WithOrigins("http://localhost:5173"); }); 
   }); 
   
   var app = builder.Build(); 
   app.UseCors("AllowFrontend"); 
   app.MapControllers(); 
   app.Run();

3. 添加测试 API： 在 Controllers 文件夹中创建 HelloController.cs：

   using Microsoft.AspNetCore.Mvc; 
   [ApiController] 
   [Route("[controller]")] 
   public class HelloController : ControllerBase { 
   [HttpGet] public string Get() 
   { return "Hello from .NET Core Backend!"; } 
   }

4. 启动后端：bash复制代码cd Backend dotnet run 确保后端启动成功并监听 http://localhost:5000。

---

4. 配置前端与后端通信

在 Vue 前端中配置调用 .NET 后端的 API。

1. 编辑 App.vue： 修改 src/App.vue，添加 API 调用逻辑：

2. 运行前端： 在项目根目录启动开发服务器：bash复制代码npm run dev 点击按钮，应该会显示后端返回的 Hello from .NET Core Backend!。

---

5. 配置 Tauri 开发模式

让 Tauri 知道前端与后端的通信路径。

1. 编辑 src-tauri/tauri.conf.json： 配置开发模式的路径：json复制代码{ "build": { "beforeDevCommand": "npm run dev", "beforeBuildCommand": "npm run build", "devPath": "http://localhost:5173", "distDir": "../dist" }, "tauri": { "allowlist": { "all": true }, "windows": [ { "title": "Tauri Vue3 + .NET Core", "width": 800, "height": 600 } ] } }
2. 启动 Tauri 开发模式：bash复制代码npm run tauri dev 这会启动一个 Tauri 窗口，显示 Vue 前端页面，并通过 .NET Core 后端提供服务。

---

最终项目结构

bash复制代码tauri-vue3-dotnet/
├── src/                  # Vue 3 前端代码
│   ├── App.vue
│   ├── main.js
│   └── ...
├── src-tauri/            # Tauri 配置和后端
│   ├── tauri.conf.json   # Tauri 配置文件
│   ├── Backend/          # .NET Core 后端代码
│   │   ├── Program.cs
│   │   ├── Controllers/
│   │   │   └── HelloController.cs
│   │   └── ...
│   └── ...
├── package.json          # Node.js 配置
└── ...

---

备注

最终在根目录下执行：

npm run tauri dev

如果启动失败：请先完成根目录下的package.json

{
  "name": "tauri-vue3-dotnet",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",                     
    "build": "vite build",            
    "preview": "vite preview",          
    "tauri": "tauri",                   
    "tauri:dev": "tauri dev",           
    "tauri:build": "tauri build"        
  },
  "dependencies": {
    "@tauri-apps/api": "^2.1.1",
    "@tauri-apps/cli": "^2.1.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.0.1"
  }
}

如果启动成功，但是只启动了浏览器页面的vue3页面而没显示App界面，这是因为Tauri的环境还未完全下载完毕，桌面应用程序的其他依赖会在此时在后台下载(但速度感人)。搜索总包数：

Info Watching D:\td\tauri-vue3-dotnet\src-tauri for changes…
Updating crates.io index

后续自动开始下载......

如果启动成功，界面也是APP端，但是点击vue的button却没获取到c#端的返回值，大概是没做跨域 或者 服务器没启动。建议用第三方请求工具做一下测试，例如：apifox、postman

如果请求成功，那就是没跨域，如果显示connent .....的 就是没启动服务器或者端口有问题

当我们输入 dotnet run 这个代码后，他会运行，需要在c#的文件夹下启动，后续可以集成在json里。

正在生成...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7100
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5263
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: D:\td\tauri-vue3-dotnet\src-tauri\Backend\

可以看到http服务器和https的服务器运行的端口不是一样的，要注意下

vue3 代码

C#代码

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.AllowAnyHeader()
              .AllowAnyMethod()
              .WithOrigins("http://localhost:5173")  // 允许来自前端的请求
              .AllowCredentials(); // 如果需要携带 Cookies
    });
});


var app = builder.Build();

app.UseCors("AllowFrontend");
app.MapControllers();
app.Run();