Vue3项目实战：用gm-crypto库5分钟搞定国密SM2/SM3/SM4加密（附完整代码）

Vue3项目实战：5分钟集成国密SM2/SM3/SM4加密全方案

最近在重构金融类项目时，发现很多团队对国密算法的集成存在畏难心理。其实用Vue3配合gm-crypto库，完全可以在5分钟内完成全套国密算法的集成。下面分享我在实际项目中的完整实现方案，包含几个你可能从未注意过的性能优化技巧。

1. 环境准备与库选型

在开始之前，确保你的Vue3项目已经初始化完成。推荐使用Vite作为构建工具，它能显著提升开发体验。安装gm-crypto库只需要执行：

npm install gm-crypto --save
# 或
yarn add gm-crypto

这个库的优势在于：

• 完整的国密算法支持（SM2/SM3/SM4）
• TypeScript友好
• 零第三方依赖
• 浏览器和Node.js环境通用

注意：生产环境建议锁定版本号，避免自动升级导致兼容性问题

2. SM2非对称加密实战

SM2作为国密标准的非对称加密算法，特别适合敏感数据传输。我们先看完整的组件实现：

import { SM2 } from 'gm-crypto'
import { reactive } from 'vue'

interface SM2State {
  publicKey: string
  privateKey: string
  originalText: string
  encryptedText: string
  decryptedText: string
}

const sm2State = reactive<SM2State>({
  publicKey: '',
  privateKey: '',
  originalText: '需要加密的敏感数据',
  encryptedText: ''