Vite（非SvelteKit）/Svelte与MongoDB、Mongoose兼容问题求助

核心问题 #

MongoDB官方驱动（mongodb包）和Mongoose都是为Node.js后端设计的，不能直接在前端浏览器环境中运行——它们依赖Node.js专属的API（如文件系统、网络模块），浏览器不支持这些API，这就是你遇到报错的根本原因。

正确实现方案 #

必须搭建独立的后端服务（用Express、Fastify等Node.js框架），由后端负责连接MongoDB，前端通过HTTP请求（fetch/axios）与后端交互。

步骤1：创建后端服务

1. 新建后端项目文件夹并初始化npm：

   mkdir svelte-mongo-backend && cd svelte-mongo-backend
   npm init -y
   

2. 安装依赖：

   npm install express mongoose cors
   

3. 新建server.js编写后端代码：

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   // 替换为你的MongoDB连接字符串（Atlas或本地）
   mongoose.connect('mongodb+srv://<你的用户名>:<密码>@cluster0.mongodb.net/your-db-name')
     .then(() => console.log('MongoDB连接成功'))
     .catch(err => console.error('连接失败:', err));
   
   // 示例Schema与Model
   const UserSchema = new mongoose.Schema({
     name: String,
     email: String
   });
   const User = mongoose.model('User', UserSchema);
   
   // 示例接口：获取所有用户
   app.get('/api/users', async (req, res) => {
     const users = await User.find();
     res.json(users);
   });
   
   // 启动服务
   const PORT = 3001;
   app.listen(PORT, () => console.log(`后端服务运行在http://localhost:${PORT}`));
   

4. 启动后端：

   node server.js
   

步骤2：前端Svelte项目调用后端接口

在Svelte组件中通过fetch调用后端接口：

<script>
  import { onMount } from 'svelte';
  let users = [];

  async function loadUsers() {
    const res = await fetch('http://localhost:3001/api/users');
    users = await res.json();
  }

  onMount(loadUsers);
</script>

<h2>用户列表</h2>
<ul>
  {#each users as user}
    <li>{user.name} - {user.email}</li>
  {/each}
</ul>

补充说明 #

你之前的官方原生JS演示能正常运行，是因为它是在Node.js环境下执行的（用node命令直接运行脚本），而非浏览器环境。

额外注意事项 #

• 生产环境不要用cors()通配配置，需指定前端域名以保证安全
• 绝对不要在前端代码中暴露MongoDB连接字符串（含用户名密码），应放在后端环境变量中

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