环境变量加载到 vue 代码中但实际上不起作用答案

【问题标题】：Environment variables loads into vue code but not working actually环境变量加载到 vue 代码中但实际上不起作用
【发布时间】：2022-01-07 02:07:39
【问题描述】：

有一个奇怪的问题。为了验证 vue 组件中的 jwt，当我使用如下硬编码的密钥时，它可以正常工作并成功验证 jwt 签名但是当我使用密钥作为环境变量时，尽管它加载在代码中并且 console.log() 打印它的值，但 jwt 不验证令牌并给出无效签名错误。

var jwtToken = await jwt.verify(this.responseResult.token,"Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP");

console.log(process.env.VUE_APP_JWT_SIGN_KEY); // Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP
var jwtToken = await jwt.verify(this.responseResult.token, process.env.VUE_APP_JWT_SIGN_KEY);

项目根目录下的.env

 VUE_APP_JWT_SIGN_KEY=Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP

package.json

"devDependencies": {
"@vue/cli-service": "^3.0.5",

开发工具控制台中的错误：

[Global Error Handler]: Error in v-on handler (Promise/async)[object Object]: JsonWebTokenError: invalid signature

我还尝试在 .env 中添加双引号以获得如下值，但给出了相同的错误。有人可以帮忙吗？

 VUE_APP_JWT_SIGN_KEY="Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP"

【问题讨论】：

标签： node.js vue.js environment-variables

【解决方案1】：

您应该将 .env 中的值包含在引号内，但也应使用反斜杠转义 $，例如

 VUE_APP_JWT_SIGN_KEY="Xp2s5v8yVkYp3s6v9y\$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP"

可能还有其他特殊符号需要转义 - 您将通过反复试验发现它们。

【讨论】：