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

是楊不是杨

已于 2024-12-24 15:16:35 修改

阅读量1.3k

点赞数 21

分类专栏：前后端文章标签： vue .netcore rust 前端框架

于 2024-12-09 10:37:22 首次发布

本文链接：https://blog.csdn.net/weixin_51955359/article/details/144340370

版权

前后端专栏收录该内容

2 篇文章

订阅专栏

环境需求

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

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

初始化项目：bash复制代码

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

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

2. 添加 Tauri 支持

安装 Tauri CLI 和前端依赖：在项目中安装 Tauri 所需的依赖：bash复制代码
```
npm install @tauri-apps/cli @tauri-apps/api
```
初始化 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 后端。

创建 .NET Core Web API：bash复制代码
```
cd src-tauri dotnet new webapi -n Backend
```

配置跨域支持：编辑 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();

添加测试 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!"; } 
}

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

4. 配置前端与后端通信

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

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

<template> 
<div> 
    <h1>Tauri + Vue 3 + .NET Core</h1> 
    <button @click="fetchMessage">Fetch Message</button> <p>{{ message }}</p> </div> </template> 
<script setup> 
import { ref } from "vue"; 
const message = ref(""); 
async function fetchMessage() 
{ try 
{ const response = await fetch("http://localhost:5000/hello"); message.value = await response.text(); } catch (error) { message.value = "Failed to fetch message."; console.error(error); } } 
</script>

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

5. 配置 Tauri 开发模式

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

编辑 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 } ] } }
启动 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 代码

<template>
  <div>
    <h1>Tauri + Vue 3 + .NET Core</h1>
    <button @click="fetchMessage">Fetch Message</button>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("");

async function fetchMessage() {
  try {
    const response = await fetch("http://localhost:5263/hello");
    message.value = await response.text();
  } catch (error) {
    message.value = "Failed to fetch message.";
    console.error(error);
  }
}
</script>

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();