Nuxt3+Tauri+Prisma 前端数据展示问题求助

我是开发新手，在基于Nuxt3+Tauri+Prisma开发桌面应用时，前端无法展示数据库数据。已在/src/lib/prisma.d.ts中初始化Prisma Client，使用defineEventHandler()和useFetch()尝试获取并展示数据，但问题依旧。相关代码如下：

/server/api/sim.get.ts #

import prisma from "~/lib/prisma"

export default defineEventHandler(async (_event) => {
const mit = await prisma.simowie.findMany(); 
return mit 
})

src/lib/prisma.d.ts #

import { PrismaClient } from '@prisma/client';let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
prisma = new PrismaClient();
} 
else {
let globalWithPrisma = global as typeof globalThis & {prisma: PrismaClient;
};

if (!globalWithPrisma.prisma) {globalWithPrisma.prisma = new PrismaClient();}prisma = globalWithPrisma.prisma;}export default prisma;

src/pages/table.vue #

<template>
    <SideBarMini class="flex fixed"/>
    <div class="flex h-screen w-screen justify-center items-center ">
            <div > {{abc}} </div>
    </div>
</template>
    

<script setup>

    async function abcs(){
            return await useFetch("/api/sim")
    }

    const abc = ref(null)
    abc.value =   abcs()
       

</script>

问题排查与修复 #

1. 异步请求处理错误 #

异步函数直接赋值会得到Promise对象而非实际数据，需正确处理异步逻辑：
修改table.vue的<script setup>部分：

<script setup>
const abc = ref(null)

async function fetchData() {
  const { data, error } = await useFetch("/api/sim")
  if (error.value) {
    console.error("数据获取失败:", error.value)
    return
  }
  abc.value = data.value
}

// 组件挂载时执行请求
onMounted(() => {
  fetchData()
})
</script>

2. Prisma初始化文件格式错误 #

.d.ts是TypeScript类型声明文件，不能存放执行逻辑，需将src/lib/prisma.d.ts重命名为src/lib/prisma.ts，内容保持不变，确保初始化代码能被正确执行。

3. 验证API接口可用性 #

开发模式下直接访问http://localhost:3000/api/sim，检查是否返回数据库数据：

• 确认Prisma Schema中定义了simowie模型
• 检查.env文件中DATABASE_URL配置正确
• 确保执行过npx prisma generate生成Prisma客户端

4. Tauri网络权限配置 #

在tauri.conf.json中确保允许访问本地API：

"allowlist": {
  "network": {
    "all": true,
    "request": true,
    "scope": ["http://localhost:3000/*"]
  }
}

内容的提问来源于stack exchange，提问作者Yashko