vue3+vite整合ras加密算法示例

以下是一个Vue3 + Vite整合RSA加密算法的示例：

1. 安装jsencrypt库：

npm install jsencrypt --save

2. 在Vue3项目中创建一个RSAUtil.js文件，添加如下代码：

import JSEncrypt from 'jsencrypt'

// 生成RSA密钥对
export function generateKeyPair () {
  const crypt = new JSEncrypt({ default_key_size: 1024 })
  return crypt.getKey()
}

// RSA公钥加密
export function encryptByPublicKey (publicKey, data) {
  const crypt = new JSEncrypt()
  crypt.setPublicKey(publicKey)
  return crypt.encrypt(data)
}

// RSA私钥解密
export function decryptByPrivateKey (privateKey, data) {
  const crypt = new JSEncrypt()
  crypt.setPrivateKey(privateKey)
  return crypt.decrypt(data)
}

3. 在Vue组件中使用RSAUtil.js：

<template>
  <div>
    <input type="text" v-model="str" placeholder="请输入要加密的字符串">
    <button @click="encrypt">加密</button>
    <button @click="decrypt">解密</button>
    <p>加密结果：{{ encrypted }}</p>
    <p>解密结果：{{ decrypted }}</p>
  </div>
</template>

<script>
import { generateKeyPair, encryptByPublicKey, decryptByPrivateKey } from './RSAUtil'

export default {
  name: 'RSAExample',
  data () {
    return {
      str: '',
      publicKey: '',
      privateKey: '',
      encrypted: '',
      decrypted: ''
    }
  },
  mounted () {
    const { publicKey, privateKey } = generateKeyPair()
    this.publicKey = publicKey
    this.privateKey = privateKey
  },
  methods: {
    encrypt () {
      this.encrypted = encryptByPublicKey(this.publicKey, this.str)
    },
    decrypt () {
      this.decrypted = decryptByPrivateKey(this.privateKey, this.encrypted)
    }
  }
}
</script>

这个示例中，我们使用了jsencrypt库生成RSA密钥对，然后使用公钥加密，私钥解密的方式进行加解密操作。在Vue组件中，我们可以输入要加密的字符串，点击加密按钮，将加密结果展示在页面上。点击解密按钮，将解密结果展示在页面上。

需要注意的是，在Vue3项目中使用Vite作为构建工具时，需要在vite.config.js中配置esbuild：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { esbuildPlugin } from './plugins/esbuild'

export default defineConfig({
  plugins: [
    vue(),
    esbuildPlugin()
  ]
})

其中，esbuildPlugin.js文件内容如下：

import { transform } from 'esbuild'

export function esbuildPlugin () {
  return {
    name: 'esbuild',
    async transform (code, id) {
      if (!/\.js$/.test(id)) {
        return
      }
      const result = await transform(code, {
        loader: 'js'
      })
      return {
        code: result.code,
        map: result.map
      }
    }
  }
}

这样，就可以在Vue3 + Vite项目中成功使用RSA加密算法了。