如何在Vite项目中使用Google Big Query客户端？

首先明确：直接在Vite前端项目里用@google-cloud/bigquery官方客户端不可行，这个库是为Node.js环境开发的，依赖大量Node专属API（比如process）和服务端环境变量，浏览器里根本没有这些东西，所以你才会遇到那些报错。

给你两个可行的方案：

方案一：后端代理（推荐，安全可靠） #

自己搭个简单的Node.js后端（比如用Express），在后端初始化BigQuery客户端，前端通过HTTP请求调用后端接口来执行查询。

步骤示例： #

1. 后端代码（比如server.js）：

const express = require('express');
const { BigQuery } = require('@google-cloud/bigquery');
const app = express();
const port = 3001;

// 初始化BigQuery客户端（确保已配置好服务账号密钥）
const bigquery = new BigQuery({
  keyFilename: './service-account-key.json', // 你的服务账号密钥文件路径
  projectId: 'your-project-id'
});

// 定义查询接口
app.get('/api/bigquery-query', async (req, res) => {
  try {
    const query = req.query.q;
    const [rows] = await bigquery.query(query);
    res.json(rows);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(port, () => {
  console.log(`Backend running on http://localhost:${port}`);
});

2. Vite前端代码（App.tsx）：

import axios from 'axios';

async function fetchBigQueryData() {
  try {
    const response = await axios.get('http://localhost:3001/api/bigquery-query', {
      params: {
        q: 'SELECT * FROM `your-project.dataset.table` LIMIT 10'
      }
    });
    console.log('查询结果:', response.data);
  } catch (err) {
    console.error('查询失败:', err);
  }
}

// 调用查询
fetchBigQueryData();

方案二：直接调用BigQuery REST API（不推荐，有安全风险） #

如果非要在前端操作，只能直接调用BigQuery的REST API，但绝对不能把服务账号密钥放在前端代码里，只能通过OAuth2让用户授权自己的Google账号来访问。这种方式配置复杂，且存在用户权限管理的问题，只适合特定场景。

为什么你之前会报错？ #

• require is not defined：Vite默认是ES模块环境，不支持CommonJS的require语法，改用import是对的，但解决不了根本的环境问题。
• process is not defined：@google-cloud/bigquery依赖Node.js的process对象来读取环境变量（比如服务账号密钥），浏览器里没有这个对象，所以会报错。

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