使用Vite搭配MariaDb时出现process is not defined错误求助

问题本质 #

你遇到的错误核心原因是：mariadb是Node.js后端专属的数据库驱动库，完全不支持在浏览器（前端）环境中运行。错误路径里的localhost:4000/node_modules/.vite/说明你的数据库连接/查询代码被Vite打包到了前端代码中，而浏览器环境不存在Node.js的process全局对象，因此触发了这个报错。

解决方案 #

1. 迁移数据库代码到后端 #

把src文件夹中涉及MariaDb连接、查询的代码，全部移到Express API的后端路由/控制器文件里。示例：

// 后端 routes/db.js
const express = require('express');
const mariadb = require('mariadb');
const router = express.Router();

// 创建数据库连接池
const pool = mariadb.createPool({
  host: 'localhost',
  user: '你的数据库用户名',
  password: '你的数据库密码',
  database: '目标数据库名'
});

// 编写接口处理数据库查询
router.get('/get-data', async (req, res) => {
  let conn;
  try {
    conn = await pool.getConnection();
    const rows = await conn.query('SELECT * FROM 你的表名');
    res.json(rows);
  } catch (err) {
    res.status(500).json({ error: err.message });
  } finally {
    if (conn) conn.release();
  }
});

module.exports = router;

2. 前端通过HTTP请求与后端交互 #

前端代码不要直接引用mariadb，而是通过fetch或axios调用后端接口获取数据。示例：

// 前端 src/api.js
async function fetchDatabaseData() {
  try {
    const response = await fetch('/api/get-data');
    const data = await response.json();
    console.log(data);
    // 这里处理拿到的数据
  } catch (err) {
    console.error('数据请求失败:', err);
  }
}

3. 配置Vite代理（如果是Vite+Express同构项目） #

如果你的项目是Vite+Express组合开发，需要：

• 让Express后端监听独立端口（比如3000），Vite开发服务器监听另一个端口（比如4000）
• 在vite.config.js中设置代理，转发前端API请求到后端：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

4. 清理前端代码中的无效引用 #

检查你的前端代码，确保没有import mariadb from 'mariadb'或require('mariadb')这类语句，只在后端代码中引入mariadb库。

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