Vite+SvelteKit+MariaDB：导入数据库连接脚本触发异常错误

问题根源 #

你当前的写法直接在前端Svelte组件中导入了依赖Node.js核心API的mysql2库，而SvelteKit组件代码会被编译打包到浏览器环境运行。浏览器不支持Node.js的buffer等核心模块，因此触发了safer-buffer相关的报错。此外，直接在前端暴露数据库连接凭证存在严重的安全风险。

解决方案：将数据库操作移至服务端 #

SvelteKit提供了服务端路由和服务器端专属模块，可安全处理数据库连接与查询，避免前端运行Node.js专属代码。

1. 重构数据库连接逻辑（服务端专属）

创建src/lib/server/db.js文件，封装数据库连接：

import mysql from 'mysql2/promise';

// 复用连接实例
let connection;

export async function getDbConnection() {
  if (!connection) {
    connection = await mysql.createConnection({
      host: "127.0.0.1",
      user: "admin",
      password: "givdb",
      database: "givdb",
    });
    console.log('Connected to MariaDB');
  }
  return connection;
}

2. 创建服务端API路由

在src/routes/api/users/+server.js中编写接口，处理数据库查询：

import { getDbConnection } from '$lib/server/db';
import { json } from '@sveltejs/kit';

export async function GET() {
  const connection = await getDbConnection();
  const [rows] = await connection.execute('SELECT * FROM User');
  // 返回JSON格式数据给前端
  return json(rows);
}

3. 前端组件调用服务端API

修改主页面代码，通过fetch调用服务端接口获取数据：

<script>
  async function fetchData() {
    try {
      const response = await fetch('/api/users');
      const users = await response.json();
      if (users.length > 0) {
        console.log(users[0].Email, "(This was fetched from database)");
      }
    } catch (error) {
      console.error('Failed to fetch data:', error);
    }
  }

  fetchData();
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>

额外注意事项 #

• 数据库凭证不要硬编码，建议使用SvelteKit的环境变量管理，服务端变量可放在.env文件中，通过$env/static/private导入
• 服务端路由与src/lib/server下的代码仅在Node.js环境运行，不会被打包到前端，可安全使用Node.js专属库
• 避免在前端组件中直接导入Node.js核心库或数据库驱动，所有涉及服务端资源的操作都应通过服务端接口完成

内容的提问来源于stack exchange，提问作者Marek Kormoš