欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/
欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper
AtomGit 仓库地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_node_vue_ts

---

1. 环境搭建：

该文完整梳理了ARM64架构鸿蒙PC（HarmonyOS/OpenHarmony6.1及以上），基于CodeArts IDE搭建Vite+Vue前端项目的全流程与疑难解决方案。项目实操中，Vite启动会出现rolldown原生模块权限拒绝报错，根源是鸿蒙系统拦截未签名二进制文件，最终解决方案为引入ohos-signpost自动签名工具，配置npm后置钩子，在依赖安装完成后自动为所有.node文件添加系统合法签名，消除权限校验拦截，最终实现CodeArts IDE内Vue+TS项目正常启动、调试。

可以参考文章：
OpenHarmony 鸿蒙 PC + CodeArts IDE 前端 Vite+Vue 完整开发环境搭建指南:https://blog.csdn.net/wanmeijuhao/article/details/161925265

---

2. crypto-js 完整介绍 + Vue3 页面演示示例

crypto-js 是什么

crypto-js 是前端纯 JS 加密解密工具库，无依赖、浏览器/Node 通用，专门做各类加解密：

1. 对称加密：AES、DES、3DES
2. 哈希摘要（不可逆）：MD5、SHA1、SHA256、SHA512
3. 编码转换：Base64、Hex
4. 非对称类辅助：HmacSHA256 签名

业务常用场景

1. 前端密码 MD5/SHA256 加密后传给后端（不存明文）
2. AES 前后端参数对称加密，接口数据防篡改
3. 生成签名校验请求参数（接口安全）

安装crypto-js

# 安装核心库
npm add crypto-js

核心常用方法说明

1. MD5(data)：生成md5哈希（不可逆）
2. SHA256(data)：安全哈希摘要
3. AES.encrypt(明文, 密钥)：AES加密
4. AES.decrypt(密文, 密钥).toString(CryptoJS.enc.Utf8)：AES解密
5. CryptoJS.enc.Base64 / CryptoJS.enc.Hex 编码转换

Vue3 完整演示页面

<template>
  <div class="demo-box">
    <h2>crypto-js 加解密演示</h2>

    <!-- MD5 哈希 -->
    <div class="item">
      <h3>1. MD5 不可逆加密</h3>
      <input v-model="md5Input" placeholder="输入内容生成MD5" />
      <p>结果：<span class="color-blue">{{ md5Result }}</span></p>
    </div>

    <!-- SHA256 -->
    <div class="item">
      <h3>2. SHA256 哈希</h3>
      <input v-model="shaInput" placeholder="输入内容SHA256" />
      <p>结果：<span class="color-green">{{ shaResult }}</span></p>
    </div>

    <!-- AES 加解密（最常用接口加密） -->
    <div class="item">
      <h3>3. AES 对称加密解密</h3>
      <input v-model="aesRaw" placeholder="待加密明文" />
      <p>AES密文：<span class="color-red">{{ aesEncStr }}</span></p>
      <p>AES解密还原：<span class="color-orange">{{ aesDecStr }}</span></p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
// 引入全部加密方法
import CryptoJS from 'crypto-js'

// AES 密钥（前后端约定同一个16/32位密钥）
const secretKey = 'abc123456789abcd'

// MD5
const md5Input = ref('123456')
const md5Result = ref('')
watch(md5Input, (val) => {
  md5Result.value = CryptoJS.MD5(val).toString()
}, { immediate: true })

// SHA256
const shaInput = ref('admin123')
const shaResult = ref('')
watch(shaInput, (val) => {
  shaResult.value = CryptoJS.SHA256(val).toString()
}, { immediate: true })

// AES
const aesRaw = ref('用户隐私数据123')
const aesEncStr = ref('')
const aesDecStr = ref('')
watch(aesRaw, (val) => {
  // 加密
  const enc = CryptoJS.AES.encrypt(val, secretKey).toString()
  aesEncStr.value = enc
  // 解密
  const decBytes = CryptoJS.AES.decrypt(enc, secretKey)
  aesDecStr.value = decBytes.toString(CryptoJS.enc.Utf8)
}, { immediate: true })
</script>

<style scoped>
.demo-box {
  padding: 24px;
  max-width: 800px;
}
.item {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 6px;
}
input {
  width: 100%;
  padding: 8px 12px;
  margin: 8px 0;
}
.color-blue { color: #1677ff; word-break: break-all; }
.color-green { color: #00b42a; word-break: break-all; }
.color-red { color: #f53f3f; word-break: break-all; }
.color-orange { color: #ff7d00; }
</style>

业务实战：登录密码加密传给后端

<script setup>
import CryptoJS from 'crypto-js'

const login = () => {
  const password = '123456'
  // 前端MD5加密密码再提交，不传输明文
  const pwdMd5 = CryptoJS.MD5(password).toString()
  // axios.post('/login', { username: 'admin', password: pwdMd5 })
}
</script>

重要注意事项

1. MD5/SHA256 不可逆：只能加密，无法解密，适合密码摘要
2. AES 对称加密：加密解密用同一密钥，前后端必须密钥一致；密钥不要硬编码暴露在前端（生产建议后端下发密钥）
3. 安全短板：前端代码可被查看，AES密钥写死在页面有泄露风险，高安全系统建议后端RSA配合使用
4. 不要用MD5做高安全校验，优先 SHA256 / SHA512
5. 加解密中文必须转 Utf8，否则会出现乱码

---

总结：

ARM64架构OpenHarmony6.1+前端环境搭建要点

基于CodeArts IDE开发Vite+Vue+TS项目，启动报rolldown原生.node模块权限报错，根源是系统拦截未签名二进制；解决方案是接入ohos-signpost自动签名工具，配置npm钩子自动给.node文件签名，即可正常启动调试，附完整搭建教程文章链接。

crypto-js 加密库全套说明（Vue3可用）

1. 库定位：纯JS无依赖，浏览器/Node双端通用，支持哈希、对称加密、Base64/Hex编码、Hmac签名
2. 常用能力

• 不可逆哈希：MD5、SHA256（密码摘要）
• 对称加密：AES（接口数据加解密）
• 编码转换：Base64、Hex

3. 使用示例
   提供完整Vue3页面，包含MD5、SHA256、AES实时加解密演示；附带登录场景实战代码，前端对密码哈希后再传给后端，避免明文传输。
4. 安全规范与坑点

• MD5安全性弱，优先SHA256；哈希不可逆，仅用于密码存储
• AES加解密共用密钥，前端硬编码密钥存在泄露风险，高安全场景搭配RSA
• 处理中文解密需指定Utf8格式，防止乱码