使用 nuxt 3 访问本地私有变量？

Question

我正在 nuxt 3 中创建一个项目，我正在使用

runtimeConfig

。我做了一些研究，发现我可以创建公共变量（可在客户端访问）和私有变量，这些变量不会被暴露。

runtimeConfig: {
  API_TOKEN_MAILERLITE: process.env.API_TOKEN_MAILERLITE,
  public: {
    API_BASE_MAILERLITE_URL: process.env.API_BASE_MAILERLITE_URL,
  },
},

我的疑问是，例如，我有一个

apiKey

来连接到外部服务，这个密钥我必须将其设置为私有，因为我不希望它在生产中后被公开，并且我必须访问它作为私有变量：

runtimeConfig.API_TOKEN_MAILERLITE

但是这样它在本地是无法访问的，并且我将其设置为未定义，那么如果我无法访问令牌，我该如何填充此服务（除非我手动更改代码，但我尽量避免每次都更改代码）我想在本地测试一下）

Answer 1

您无法从客户端访问私有变量，但为了测试，您可以使用它：

<script setup>
const config = useRuntimeConfig();
console.log("Runtime config:", config);
if (process.server) {
  console.log("API secret:", config.apiSecret);
}
</script>

您在浏览器日志中看不到 API 机密，但您可以在编辑器终端中查看它

console.log(runtimeConfig.apiSecret) // The private keys which are only available server-side
console.log(runtimeConfig.public.apiBase) //// Keys within public are also exposed client-side