Instagram 的 api 调用正在运行，但返回一个错误，即 .env 中的令牌未定义。我正在使用 Nuxt3。我该如何修复错误？

Question

我想在 Nuxt3 组件中显示一个 instagram 图片库。现在我只是想打印从对 instagram 的 API 调用返回的数据。

这确实有效——返回数据并在浏览器中显示模板。 但是，我收到一条错误消息，指出 .env 中的令牌变量未定义。

当我只将 url 打印到控制台时，它在 VScode 终端中正确显示，但在浏览器控制台中不起作用。

这是我收到的错误： instagram.vue:8 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'LMM_TOKEN') 这是我的 .env LMM_TOKEN="mytokenhere" 我已经尝试过使用引号和不使用引号。我也尝试过 useRuntimeConfig() 但得到了同样的错误。

我仍然对调用 API 感到非常不自在，所以我怀疑问题出在我的组件中（尽管它确实打印出了数据！）：

<template>
  <div>
   <pre v-if="feed">{{ feed.data }}</pre> 
  </div>
</template>
<script setup>

const instaToken = process.env.LMM_TOKEN
const url = `https://graph.instagram.com/me/media?fields=id,caption&access_token=${instaToken}`
const feed = ref({})
try {
  const data = await fetch(url).then((res) => {
    return res
  })
  feed.value = await data.json();
} catch (e) {
  console.log(e)
}
</script>