Vue3导入jsonwebtoken报错：Cannot read properties of undefined (reading 'from')

AI 小北

2026-7-8

解决Vite+TypeScript中jsonwebtoken导入报错的问题

问题根源

jsonwebtoken是为Node.js环境设计的库，依赖Node.js内置的buffer等模块，而Vite在浏览器构建时会将这类Node内置模块外部化，导致客户端运行时找不到相关依赖，从而抛出错误。

方案一：使用浏览器兼容的JWT库（推荐）

直接替换为专为浏览器环境设计的JWT处理库，比如jose或jsrsasign，无需依赖Node内置模块。

以jose为例：

安装依赖

npm install jose

TypeScript中使用示例

import { SignJWT, jwtVerify } from 'jose';

// 生成JWT
async function createToken(payload: Record<string, any>, secret: string) {
  const encoder = new TextEncoder();
  return await new SignJWT(payload)
    .setProtectedHeader({ alg: 'HS256' })
    .setExpirationTime('1h')
    .sign(encoder.encode(secret));
}

// 验证JWT
async function checkToken(token: string, secret: string) {
  const encoder = new TextEncoder();
  const { payload } = await jwtVerify(token, encoder.encode(secret));
  return payload;
}

方案二：为jsonwebtoken配置Node模块Polyfill（不推荐生产环境）

如果一定要使用jsonwebtoken，可以通过Vite插件为浏览器环境提供Node内置模块的Polyfill：

安装依赖和插件

npm install buffer
npm install vite-plugin-node-polyfills --save-dev

修改vite.config.ts配置

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['buffer'],
      globals: {
        Buffer: true,
      },
    }),
  ],
});

正常导入使用jsonwebtoken

import jwt from 'jsonwebtoken';

// 生成token
const token = jwt.sign({ userId: 123 }, 'your-secret-key', { expiresIn: '1h' });
// 验证token
const decoded = jwt.verify(token, 'your-secret-key');