Vue&Nuxt项目构建后如何隐藏.env文件中的变量？

首先明确：前端代码最终都会暴露给用户，不管用什么混淆、加密工具隐藏.env变量，只要用户能拿到打包后的JS文件，就能通过逆向手段提取出密钥——所谓的"隐藏"只是增加一点逆向成本，根本无法从根源上解决安全问题。你的核心问题不是如何隐藏密钥，而是不该把对称加密的密钥放在前端。

给你几个可行的解决方案：

1. 把加密解密逻辑移到服务器端（最安全） #

把密钥存在Nuxt的服务器端环境变量里，前端只和Nuxt的后端接口交互，由Nuxt服务器负责和Laravel API之间的加密解密：

• 前端发明文请求到Nuxt的/api/proxy路由
• Nuxt服务器用密钥加密请求数据，转发给Laravel API
• Laravel返回加密响应后，Nuxt服务器解密再返回给前端

这样密钥完全不会出现在前端代码里，彻底避免泄露风险。比如你可以在Nuxt里创建一个代理接口：

// server/api/proxy-laravel.post.ts
import CryptoJS from 'crypto-js'

export default defineEventHandler(async (event) => {
  // 读取前端发来的明文数据
  const rawData = await readBody(event)
  const key = CryptoJS.enc.Base64.parse(process.env.DECRYPTION_KEY!)

  // 复用你的加密逻辑处理请求
  let iv = CryptoJS.lib.WordArray.random(16)
  const encryptOptions = {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  }
  const encryptedValue = CryptoJS.AES.encrypt(JSON.stringify(rawData), key, encryptOptions).toString()
  const ivBase64 = CryptoJS.enc.Base64.stringify(iv)
  const encryptedPayload = {
    iv: ivBase64,
    value: encryptedValue,
    mac: CryptoJS.HmacSHA256(ivBase64 + encryptedValue, key).toString(),
  }
  const finalRequestData = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(encryptedPayload)))

  // 转发加密后的请求到Laravel API
  const laravelRes = await fetch(process.env.LARAVEL_API_ENDPOINT!, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ data: finalRequestData })
  })

  // 解密Laravel的响应
  const encryptedResp = await laravelRes.text()
  const decodedResp = JSON.parse(atob(encryptedResp))
  const respIv = CryptoJS.enc.Base64.parse(decodedResp.iv)
  const decryptedResp = CryptoJS.AES.decrypt(decodedResp.value, key, { iv: respIv })
  const finalData = JSON.parse(decryptedResp.toString(CryptoJS.enc.Utf8))

  return finalData
})

前端只需要调用这个接口，不用管加密解密：

// 前端请求代码
const sendRequest = async (data) => {
  const res = await fetch('/api/proxy-laravel', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  return res.json()
}

2. 改用非对称加密（RSA） #

如果一定要在前端做加密，别用对称加密（AES），改用非对称加密：

• 后端生成RSA密钥对，把公钥暴露给前端
• 前端用公钥加密请求数据，后端用私钥解密
• 后端用私钥加密响应数据，前端用公钥解密

公钥本来就是可以公开的，即使被用户拿到，也无法解密只有私钥才能解开的数据，安全性有保障。注意RSA加密大数据效率低，通常做法是：前端用公钥加密一个随机生成的AES密钥，再用这个AES密钥加密实际数据，把两者一起发给后端，后端先用私钥解出AES密钥，再解密数据。

3. 避免前端处理敏感数据的解密 #

如果某些数据不需要前端处理，只需要展示，那直接让Laravel API处理好脱敏后的内容再返回给前端，彻底避免前端需要解密敏感数据的场景。

顺便提下Nuxt环境变量的正确用法 #

Nuxt里只有以NUXT_PUBLIC_开头的环境变量会被打包到前端代码里，其他变量默认只在服务器端可用。之前你能在前端源码看到DECRYPTION_KEY，大概率是你在前端代码里直接引用了它，导致打包工具把它注入到了前端代码中——正确的做法是，只有服务器端代码才能访问这个密钥。

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