如何在Vue 3应用中接入MongoDB数据库？

我是自学开发者，对构建流程、Web应用结构的底层细节不太熟悉，依赖管理、包引入和配置文件的逻辑梳理较困难。当前情况如下：

• 已通过Node.js成功连接免费MongoDB Atlas数据库，代码如下：

import { MongoClient, ServerApiVersion } from 'mongodb'
const uri = "mongodb+srv://<username>:<password>@<otherURLStuff>";

const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  }
});

export const data = await client.db('PlayerData').collection('PlayerData').find()

• 写了一个简单Vue组件尝试展示数据，但不知道如何正确获取：

<script setup>
const { data } = await useFetch('noIdeaIfThisIsRight')

console.log(data)

</script>

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<style scoped>
</style>

• 操作时出现util_1.promisify doesn't exist错误，偶尔还会有500错误，存在关键知识盲区，核心问题是：
  1. 当前情况出了什么问题？
  2. 如何将MongoDB Atlas的数据接入Vue3应用？

我试过Nuxt.js的useFetch()和原生Fetch API，但用法可能有误。

问题根源 #

1. 前端直接使用Node.js数据库库：mongodb是Node.js端的包，依赖Node.js内置模块（比如util），浏览器环境没有这些模块，所以会抛出util_1.promisify doesn't exist错误。
2. 缺少前后端交互中间层：前端不能直接连接数据库，必须通过后端API转发请求，否则会暴露数据库凭证，同时不符合Web应用安全架构。
3. 数据查询未处理完成：原Node.js代码里的find()返回的是游标，不是直接可用的数据，需要调用toArray()才能拿到数组格式的结果。

实现步骤 #

第一步：搭建后端API（以Express为例） #

1. 初始化后端项目并安装依赖：

mkdir mongo-backend && cd mongo-backend
npm init -y
npm install express mongodb cors

2. 创建server.js，编写连接逻辑和数据接口：

import express from 'express';
import { MongoClient, ServerApiVersion } from 'mongodb';
import cors from 'cors';

const app = express();
const port = 3001;

// 允许前端跨域请求（替换为你的Vue应用地址，比如http://localhost:5173）
app.use(cors({ origin: 'http://localhost:5173' }));
app.use(express.json());

// MongoDB连接配置
const uri = "mongodb+srv://<username>:<password>@<otherURLStuff>";
const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  }
});

// 连接数据库
async function connectDB() {
  try {
    await client.connect();
    console.log("已连接MongoDB Atlas");
  } catch (err) {
    console.error("连接失败：", err);
    process.exit(1);
  }
}
connectDB();

// 定义获取玩家数据的接口
app.get('/api/players', async (req, res) => {
  try {
    const db = client.db('PlayerData');
    const collection = db.collection('PlayerData');
    // 将游标转为数组
    const players = await collection.find().toArray();
    res.json(players);
  } catch (err) {
    console.error("获取数据失败：", err);
    res.status(500).json({ error: "获取数据失败" });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

3. 在package.json添加启动脚本，然后启动后端：

"scripts": {
  "start": "node --experimental-modules server.js"
}

执行npm run start启动服务。

第二步：修改Vue组件调用后端接口 #

Vue3+Vite项目：

<script setup>
import { ref, onMounted } from 'vue';

const playerData = ref(null);
const fetchError = ref(null);

async function fetchPlayers() {
  try {
    const response = await fetch('http://localhost:3001/api/players');
    if (!response.ok) throw new Error("请求失败");
    playerData.value = await response.json();
  } catch (err) {
    fetchError.value = err.message;
    console.error(err);
  }
}

onMounted(fetchPlayers);
</script>

<template>
  <div class="player-container">
    <div v-if="fetchError" class="error">错误：{{ fetchError }}</div>
    <div v-else-if="playerData">
      <h3>玩家数据</h3>
      <ul>
        <li v-for="player in playerData" :key="player._id">
          {{ JSON.stringify(player) }}
        </li>
      </ul>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<style scoped>
.player-container { padding: 20px; }
.error { color: red; }
</style>

Nuxt.js项目：

<script setup>
const { data: playerData, error: fetchError } = await useFetch('http://localhost:3001/api/players');
</script>

<template>
  <div class="player-container">
    <div v-if="fetchError" class="error">错误：{{ fetchError.message }}</div>
    <div v-else-if="playerData">
      <h3>玩家数据</h3>
      <ul>
        <li v-for="player in playerData" :key="player._id">
          {{ JSON.stringify(player) }}
        </li>
      </ul>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<style scoped>
.player-container { padding: 20px; }
.error { color: red; }
</style>

第三步：常见错误排查 #

1. util_1.promisify doesn't exist：删除前端项目中的mongodb依赖，确保该包只在后端使用。
2. 500错误：查看后端控制台的报错信息，检查MongoDB连接字符串是否正确、Atlas的IP白名单是否允许后端服务器访问（可临时设为0.0.0.0/0测试）、数据库/集合名称是否正确。
3. 跨域错误：确保后端cors配置的origin是前端应用的实际地址，或者暂时设为*（生产环境不建议）。

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