Svelte组件无法访问.env文件，隐藏API密钥调用API时出错

此前我曾成功实现该功能，但在隐藏API密钥调用API时出现错误。我希望在单个Svelte组件内完成所有操作以简化流程，相关组件代码如下：

<script>
import 'dotenv/config';
const API_KEY = process.env.API_KEY;

// Fetch the data when the component is created
async function fetchData() {
    const res = await fetch(`https://api.sportmonks.com/v3/football/leagues?api_token=${API_KEY}`);
  const data = await res.json();
  return data.data;
}

let leagues = [];
async function load() {
  leagues = await fetchData();
}

// Initialize the data when the component is created
$: {
  load();
} 
</script> 

{#each leagues as league}
   <div>{league.name}</div>
{/each}

错误提示为process is not defined（截图显示该错误）。

核心原因 #

浏览器前端环境中不存在Node.js的process对象，直接在Svelte组件里引用process.env.API_KEY会导致未定义错误。根据你的项目类型，选择对应的处理方式：

1. SvelteKit 项目 #

• 在项目根目录创建.env文件，添加带PUBLIC_前缀的环境变量（SvelteKit仅会注入前缀为PUBLIC_的变量到前端）：

  PUBLIC_API_KEY=你的API密钥
  

• 修改组件代码，通过$env/static/public导入环境变量：

  <script>
  import { env } from '$env/static/public';
  
  async function fetchData() {
      const res = await fetch(`https://api.sportmonks.com/v3/football/leagues?api_token=${env.PUBLIC_API_KEY}`);
      const data = await res.json();
      return data.data;
  }
  
  let leagues = [];
  async function load() {
      leagues = await fetchData();
  }
  
  $: load();
  </script>
  
  {#each leagues as league}
     <div>{league.name}</div>
  {/each}
  

2. 纯Svelte（Vite构建）项目 #

• 在项目根目录创建.env文件，添加带VITE_前缀的环境变量（Vite会自动注入此类变量）：

  VITE_API_KEY=你的API密钥
  

• 修改组件代码，通过import.meta.env获取变量：

  <script>
  async function fetchData() {
      const res = await fetch(`https://api.sportmonks.com/v3/football/leagues?api_token=${import.meta.env.VITE_API_KEY}`);
      const data = await res.json();
      return data.data;
  }
  
  let leagues = [];
  async function load() {
      leagues = await fetchData();
  }
  
  $: load();
  </script>
  
  {#each leagues as league}
     <div>{league.name}</div>
  {/each}
  

重要提醒 #

如果你的API密钥需要保密（比如包含权限控制），绝对不能在前端代码中直接暴露。正确的做法是搭建后端代理：前端调用自己的后端接口，由后端携带密钥请求第三方API，再将结果返回给前端。同时，务必把.env文件加入.gitignore，防止密钥被提交到代码仓库。

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