Shopify Hydrogen中如何访问.env环境变量？解决process未定义问题

Hydrogen基于Vite构建，不支持直接使用process.env，需通过import.meta.env读取环境变量，同时要遵循变量可见性规则：

步骤1：根据使用场景调整变量 #

场景1：仅服务器端使用API_KEY #

• 保留.env中的变量名：

  API_KEY="你的密钥值"
  

• 修改config.ts的读取逻辑：

  const builderHost = 'https://example.com';
  const Config = {
    apiKey: import.meta.env.API_KEY ?? '',
    builderWelcomeUrl: `${builderHost}/share/xxxxxxx`,
  };
  export default Config;
  

  注：此变量仅能在服务器端文件（如server.ts、服务器组件、loaders/actions）中访问，不会暴露给客户端。

场景2：客户端需要使用API_KEY #

• 先修改.env中的变量名，添加PUBLIC_前缀：

  PUBLIC_API_KEY="你的密钥值"
  

• 再调整config.ts：

  const builderHost = 'https://example.com';
  const Config = {
    apiKey: import.meta.env.PUBLIC_API_KEY ?? '',
    builderWelcomeUrl: `${builderHost}/share/xxxxxxx`,
  };
  export default Config;
  

  注：带PUBLIC_前缀的变量会被注入到客户端代码中，可在任意组件内访问。

步骤2：重启本地服务 #

修改.env文件后，必须重启MiniOxygen本地开发服务器，新的环境变量才能生效。

内容的提问来源于stack exchange，提问作者Iuri F.