如何在Astro页面中访问astro.config.mjs的配置值？

方法一：直接使用全局环境变量（推荐） #

Astro会自动将astro.config.mjs中配置的site值注入到全局环境变量import.meta.env.SITE中，无需额外导入或配置。在你的布局文件（.astro格式）中可以直接替换硬编码内容：

---
---
<meta property="og:url" content={import.meta.env.SITE} />
<meta property="og:image" content={`${import.meta.env.SITE}/social.png`} />

方法二：获取完整配置对象（按需使用） #

如果需要访问site之外的其他配置项，可以通过Astro提供的getConfig工具函数异步获取完整配置：

1. 在组件的脚本区导入工具函数并获取配置：

---
import { getConfig } from 'astro/config';
const config = await getConfig();
---

2. 在模板中使用配置值：

<meta property="og:url" content={config.site} />
<meta property="og:image" content={`${config.site}/social.png`} />

注意：这种方式是异步操作，仅在需要完整配置时使用，单纯获取site的话，方法一更高效。

客户端组件中的使用 #

如果是在React、Vue等客户端组件中，同样可以直接使用import.meta.env.SITE，无需额外处理：

// React组件示例
export default function SocialMeta() {
  return (
    <>
      <meta property="og:url" content={import.meta.env.SITE} />
      <meta property="og:image" content={`${import.meta.env.SITE}/social.png`} />
    </>
  );
}

内容的提问来源于stack exchange，提问作者Soviut