Vue项目引入npm的bcrypt 5.1致应用崩溃及模块报错

核心原因 #

bcrypt是专为Node.js后端设计的模块，依赖fs、path等Node.js核心API，而Vue前端代码运行在浏览器环境中，这些API不存在，直接引入必然导致应用崩溃。

解决办法 #

1. 后端处理密码哈希（推荐方案） #

把密码哈希逻辑迁移到Node.js后端服务中，前端仅负责传递明文密码，后端完成哈希与验证：

• 注册/修改密码时：后端接口接收前端传来的明文密码，调用bcrypt.hash()生成哈希值后存储到数据库
• 登录验证时：后端取出数据库中存储的哈希值，用bcrypt.compare()对比前端传入的密码

2. 前端替代方案：使用浏览器兼容的哈希库 #

如果因特殊需求必须在前端处理（不推荐，明文密码传输存在安全风险），改用纯JS实现、无Node核心依赖的bcryptjs：

• 安装依赖：npm install bcryptjs
• 代码示例：

import bcrypt from 'bcryptjs'

// 生成密码哈希
const passwordHash = bcrypt.hashSync('user-input-password', 10)
// 验证密码
const isPasswordValid = bcrypt.compareSync('input-password', passwordHash)

3. 临时webpack配置（仅应急，不推荐） #

若执意要在前端使用bcrypt，需通过webpack配置模拟Node核心模块，但可能引发其他兼容性问题：
在vue.config.js中添加配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    resolve: {
      fallback: {
        "fs": false,
        "path": require.resolve("path-browserify"),
        "util": require.resolve("util/"),
        "stream": require.resolve("stream-browserify")
      }
    }
  }
}

同时安装对应依赖：npm install path-browserify util stream-browserify process

关键提醒 #

• 永远不要在前端处理敏感密码逻辑，即便使用哈希，明文密码在传输过程中仍有被劫持的风险，必须配合HTTPS协议
• 后端处理是最安全、合规的密码哈希实现方式

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