如何在Cloudflare Pages/Workers与Vue项目中访问环境变量？

一、Cloudflare Functions中访问服务器端环境变量（/functions/api/funct.js） #

服务器端环境变量（如TURNSTILE_SECRET_KEY）属于敏感数据，只能在Cloudflare Functions中使用，绝对不能暴露给前端。直接在Functions的fetch处理函数中通过env参数访问即可：

export default {
  async fetch(request, env, ctx) {
    // 直接读取服务器端环境变量
    const turnstileSecret = env.TURNSTILE_SECRET_KEY;
    
    // 示例：调用Turnstile验证接口
    const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        secret: turnstileSecret,
        response: await request.json().then(data => data.response)
      })
    });
    
    return new Response(JSON.stringify(await response.json()), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
};

注意：在Cloudflare Pages控制台的「环境变量」设置中，这类敏感变量要设为Secret类型，避免泄露。

二、Vue组件中访问客户端环境变量（/src/components/Comp.vue） #

客户端可公开的变量（如TURNSTILE_SITE_KEY），需要在变量名前添加PUBLIC_前缀（比如PUBLIC_TURNSTILE_SITE_KEY），Cloudflare Pages会自动将其注入到前端代码中，本地和部署后都能一致访问。

本地开发配置 #

在项目根目录的.env.local文件中添加：

PUBLIC_TURNSTILE_SITE_KEY=你的站点密钥

Vue组件中使用 #

<script setup>
// 直接通过import.meta.env访问
const siteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;

// 示例：在模板中使用
// <div><Turnstile :site-key="siteKey" /></div>
</script>

三、你之前的错误原因 #

你手动调用fetch()时没有传入env参数，导致函数内的env为undefined，所以会抛出Cannot read properties of undefined错误。另外，前端组件无法直接读取Cloudflare服务器端的环境变量，必须通过上述的客户端变量前缀或API接口（仅非敏感数据）获取。

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