Vite-React项目导入jsonwebtoken报错的问题求助

AI 小北

2026-7-18

问题：Vite-React项目导入jsonwebtoken时浏览器报错

在Vite-React项目中导入jsonwebtoken库后，浏览器控制台出现报错。已尝试安装@esbuild-plugins/node-globals-polyfill并配置vite.config.js，但问题仍未解决，当前配置代码如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
})

解决方案

jsonwebtoken是专门为Node.js环境设计的库，依赖大量Node.js内置模块（如crypto、fs等），这些模块在浏览器环境中不存在，单纯通过polyfill全局变量无法解决核心兼容性问题。

推荐两种处理方式：

1. 换用浏览器兼容的JWT库

选择支持浏览器环境的JWT实现，比如：

jose：现代API设计，完全兼容浏览器，覆盖所有JWT标准操作
jsrsasign：成熟的浏览器端JWT处理工具

以jose为例，安装和使用步骤：

npm install jose

import { SignJWT, jwtVerify } from 'jose';

// 生成JWT
const secret = new TextEncoder().encode('your-secret-key');
const token = await new SignJWT({ foo: 'bar' })
  .setProtectedHeader({ alg: 'HS256' })
  .setIssuedAt()
  .setExpirationTime('1h')
  .sign(secret);

// 验证并解析JWT
const { payload } = await jwtVerify(token, secret);
console.log(payload);