Vue项目引入node-redis 3.1.0运行报charCodeAt未定义错误如何解决

问题根源 #

你犯了运行环境适配错误：你安装的redis npm包是Node.js服务端专属依赖，仅支持在Node.js runtime中运行，完全不兼容浏览器环境。

• 报错的直接原因是浏览器运行时没有Node.js内置的process全局对象，redis包内部代码执行process.version.charCodeAt时，process为undefined，因此抛出类型错误。
• 编译阶段无报错是因为前端打包工具仅做语法转换，不会校验第三方依赖的运行环境兼容性。

另外需要注意：就算你手动补全process变量也解决不了根本问题，Redis默认使用TCP协议通信，浏览器出于安全策略限制不允许直接发起TCP连接，后续的Redis连接逻辑必然无法执行。

修复方案 #

方案1（生产环境推荐） #

所有Redis操作放到后端服务实现：

1. 在你的Node.js后端中封装Redis读写逻辑，对外暴露HTTP接口，例如GET /api/redis-get?key=<key>
2. 前端Vue代码中删除redis包的导入和相关逻辑，改用fetch/axios调用后端封装好的接口拿返回值即可。
   这种方案同时可以在后端做权限校验，避免Redis数据直接暴露到前端引发安全问题。

方案2（仅本地测试可用） #

如果仅做本地测试不想写后端代码，可以部署Redis HTTP代理服务（例如webdis），将Redis的TCP协议转换为浏览器支持的HTTP协议，前端直接调用代理服务的HTTP接口操作Redis即可。

该方案会将Redis完全暴露到公网，存在极高的数据泄露、数据篡改风险，绝对禁止在生产环境使用。

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