Vue.js 3应用连接根目录MS Access数据库，node-adodb能否解决报错？

核心问题分析 #

node-adodb 是Node.js 专属模块，依赖 Node.js 内置 API（如 Buffer）以及 Windows 系统的 ADODB 驱动，无法直接在浏览器环境（Vue 前端）中运行。你遇到的 Buffer is not defined 错误，本质是浏览器没有 Node.js 的内置对象；另外，浏览器出于安全限制，也无法直接读取本地根目录的 books.accdb 文件。

推荐方案：Node.js 后端代理（唯一可行的生产级方案） #

通过搭建一个简单的 Node.js 后端服务，在后端中使用 node-adodb 连接 Access 数据库，前端通过 HTTP 请求获取数据。

步骤 1：创建 Node.js 后端服务 #

1. 新建一个后端项目文件夹，初始化项目：

   mkdir access-backend && cd access-backend
   npm init -y
   npm install express node-adodb cors
   

2. 在项目根目录创建 server.js，写入以下代码：

   const express = require('express');
   const ADODB = require('node-adodb');
   const cors = require('cors');
   const app = express();
   const port = 3001;
   
   // 启用跨域支持
   app.use(cors());
   // 解析 JSON 请求体
   app.use(express.json());
   
   // 配置 Access 数据库连接字符串
   // 确保 books.accdb 放在后端项目根目录下
   const connectionStr = 'Provider=Microsoft.ACE.OLEDB.12.0;Data Source=' + __dirname + '/books.accdb';
   const db = ADODB.open(connectionStr);
   
   // 示例接口：获取所有书籍数据
   app.get('/api/books', async (req, res) => {
     try {
       const result = await db.query('SELECT * FROM Books'); // 替换为你的表名
       res.status(200).json(result);
     } catch (err) {
       res.status(500).json({ error: '数据库查询失败：' + err.message });
     }
   });
   
   // 启动服务
   app.listen(port, () => {
     console.log(`后端服务运行在 http://localhost:${port}`);
   });
   

3. 将你的 books.accdb 文件复制到后端项目根目录，启动服务：

   node server.js
   

步骤 2：Vue 前端调用后端接口 #

1. 在 Vue 项目中安装 axios：

   npm install axios
   

2. 在 App.vue 中修改代码，通过接口获取数据：

   <template>
     <div class="book-list">
       <h2>书籍列表</h2>
       <div v-if="loading">加载中...</div>
       <div v-else-if="error">{{ error }}</div>
       <ul v-else>
         <li v-for="book in books" :key="book.id">
           {{ book.title }} - {{ book.author }}
         </li>
       </ul>
     </div>
   </template>
   
   <script setup>
   import axios from 'axios';
   import { ref, onMounted } from 'vue';
   
   const books = ref([]);
   const loading = ref(true);
   const error = ref('');
   
   onMounted(async () => {
     try {
       const response = await axios.get('http://localhost:3001/api/books');
       books.value = response.data;
     } catch (err) {
       error.value = '获取数据失败：' + err.message;
     } finally {
       loading.value = false;
     }
   });
   </script>
   

关于前端直接使用 node-adodb 的说明 #

即使通过配置 Vite/Webpack 解决 Buffer 未定义的问题（如下），浏览器依然无法读取本地的 books.accdb 文件（浏览器无本地文件系统访问权限），因此该方案仅用于理解错误原因，无实际价值：

临时解决 Buffer 错误（仅用于测试，无实际意义） #

如果是 Vite 创建的 Vue 项目，修改 vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      buffer: 'buffer'
    }
  },
  optimizeDeps: {
    include: ['buffer']
  },
  define: {
    'process.env': {}
  }
});

在 main.js 中手动挂载 Buffer：

import { Buffer } from 'buffer';
window.Buffer = Buffer;

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