如何從 Astro 中的框架組件訪問環境變量？

Question

我在一個使用 Astro 的項目中工作，我正在使用一個帶有 VUE 的組件。 對於這個項目，我需要訪問一些環境變量。

我可以從 Astro 模板訪問，但我找不到進入 VUE 組件的方法。 這可能嗎？

Answer 1

如果不暴露環境變量，就無法做到這一點。

為此，我們必須將 function 移動到在服務器端運行的 API 的端點，並發出請求以安全地執行它。

Answer 2

您可以像這樣將 env var 作為數據公開給 Vue 組件......

Vue 2
<script>
const { PUBLIC_ENV_HERE } = import.meta.env;

export default {
  data() {
    return {
      PUBLIC_ENV_HERE,
    };
  },
};
</script>

Vue 3 with script setup
<script setup>
const { PUBLIC_ENV_HERE } = import.meta.env;
</script>

請記住在客戶端變量前加上PUBLIC - 請參閱https://docs.astro.build/en/guides/environment-variables/了解更多信息。