Vue Vite.js项目导入jwt时出现util.inherits is not a function报错

• 你在浏览器端运行的Vue项目中引入了仅适配Node.js环境的jsonwebtoken依赖，这个包依赖Node.js内置的util模块，util.inherits是Node环境独有的API，浏览器本身没有实现这个方法。
• Vite 3及以上版本默认不再自动为前端项目注入Node.js核心模块的兼容垫片（polyfill），因此运行时会直接抛出函数不存在的错误。
• 重要安全提示：不建议在前端项目中使用jsonwebtoken做JWT签发、校验操作，JWT的签名密钥属于敏感信息，存放在前端代码中会完全公开，存在严重的安全隐患。JWT的签发、校验逻辑必须放在后端服务实现，前端通常只需要解析JWT读取payload中的业务字段即可。

根据实际使用场景选择对应方案：

方案1：仅需前端解析JWT内容（推荐，无安全风险） #

卸载不兼容的jsonwebtoken包，改用专门面向浏览器环境设计的轻量JWT解析库：

1. 移除原有依赖

npm uninstall jsonwebtoken

2. 安装浏览器专用JWT解析包

npm install jwt-decode

3. 代码中使用示例

import { jwtDecode } from "jwt-decode";
// 替换为你实际拿到的JWT字符串
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
const payload = jwtDecode(token);
// 即可直接获取JWT中存储的用户信息等字段
console.log(payload);

方案2：必须在前端完整运行jsonwebtoken（不推荐，存在密钥泄露风险） #

手动为Vite配置Node.js核心模块的兼容垫片：

1. 安装所需的垫片依赖

npm install util @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill -D

2. 修改项目根目录下的vite.config.js配置文件，添加polyfill相关配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfillPlugin from '@esbuild-plugins/node-modules-polyfill'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true
        }),
        NodeModulesPolyfillPlugin()
      ]
    }
  },
  resolve: {
    alias: {
      util: 'util'
    }
  }
})

3. 重启Vite开发服务即可消除该报错。

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