我研究并发现了解决我的案例的三种不同可能性：我想进行异步 API 调用（使用 dotenv 变量来存储凭据）并在应用程序初始化时将返回的数据提交给 Vuex——保持信用安全。
目前我正在尝试使用 serverMiddleware，但无法访问上下文。这可能吗？目前只是收到“未定义商店”错误。
另外，经过研究，我发现使用常规中间件并不是一个好主意，因为在客户端运行任何代码都会暴露 env 变量……但我很困惑。 if (!process.client) { ... } 不处理这个吗？还是我错过了更大的图景。
谢谢，我期待更彻底地了解这一点。
【问题讨论】：
标签： vue.js vuex nuxt.js api-key
您可以使用serverMiddleware。
你可以这样做：
客户端 -> 调用 serverMiddleware -> servermiddleware 调用 API。
这样 API 密钥不在客户端，而是保留在服务器上。
例子：
远程api为：https://maps.google.com/api/something
你的 api：https://awesome.herokuapp.com
由于您自己的 api 可以访问环境变量，并且您不希望 api 密钥包含在生成的客户端构建中，因此您创建一个 serverMiddleware 来代理请求给你。
所以最终，您的客户端只会调用 https://awesome.herokuapp.com/api/maps，但该端点只会调用 https://maps.google.com/api/something?apikey=123456 并将响应返回给您
【讨论】：