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

Question

有个奇怪的问题。为了验证 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 中将双引号放在 value 中，如下所示，但给出了同样的错误。有人可以帮忙吗？

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

Answer 1

您应该将 .env 中的值括在引号内，但还要用反斜杠转义 $，例如

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

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

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

Environment variables loads into vue code but not working actually

environment-variables

node.js

vue.js