VueJS 3 + Node v14环境下Buffer is not defined问题求助

Node.js v14.16.0中Buffer默认是全局可用的，出现这个错误大概率是运行环境不符或模块类型导致全局变量不可用，以下分情况解决：

情况1：代码运行在浏览器环境 #

如果你的代码是在浏览器里执行（比如前端项目打包后），Node.js的Buffer对象不存在，改用浏览器原生API实现：

convertToBase64(string) {
    try {
        if (!string) return;
        
        // 兼容非ASCII字符的base64转换
        if (typeof btoa === 'function') {
            const encodedStr = encodeURIComponent(string);
            return btoa(unescape(encodedStr));
        } 
        // 针对现代浏览器的TextEncoder方案
        else if (typeof TextEncoder !== 'undefined') {
            const encoder = new TextEncoder();
            const uint8Array = encoder.encode(string);
            return btoa(String.fromCharCode(...uint8Array));
        }
    } catch (error) {
        console.error(error);
    }
}

情况2：代码确实运行在Node.js环境 #

子情况2.1：使用ESM模块（package.json中包含"type": "module"） #

ESM模块中Buffer不再是全局变量，需要手动导入：

import { Buffer } from 'buffer';

convertToBase64(string) {
    try {
        if (!string) return;
        const buff = Buffer.from(string);
        return buff.toString('base64');
    } catch (error) {
        console.error(error);
    }
}

子情况2.2：使用CommonJS模块 #

如果是CommonJS模块却出现全局Buffer丢失，可能是全局变量被篡改，手动导入buffer模块即可：

const { Buffer } = require('buffer');

function convertToBase64(string) {
    try {
        if (!string) return;
        const buff = Buffer.from(string);
        return buff.toString('base64');
    } catch (error) {
        console.error(error);
    }
}

额外排查点 #

• 检查代码中是否有覆盖全局Buffer的逻辑，比如let Buffer = null这类赋值语句
• 确认Node.js启动参数没有禁用全局Buffer的配置（该场景概率极低）

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