在Vite React项目中获取Amplify环境变量的方法

要让Vite React应用正确读取Amplify的环境变量，需要针对Vite的环境变量规则和Amplify的配置做调整，具体操作如下：

• 配置Amplify客户端变量前缀
  Vite默认仅识别以VITE_开头的客户端环境变量，所以需要告诉Amplify使用这个前缀。在项目根目录的amplify/cli.json文件中添加以下配置：

  {
    "envPrefix": "VITE_"
  }
  

• 定义符合规则的环境变量

  • 本地开发时，在项目根目录创建.env文件，变量名必须以VITE_开头，例如：

    VITE_AMPLIFY_API_URL=https://xxx.execute-api.us-east-1.amazonaws.com
    VITE_AMPLIFY_APP_ID=xxx123
    

  • 若使用Amplify托管部署，在Amplify控制台的「环境变量」设置中添加变量，同样以VITE_开头，并且勾选「将此变量暴露给客户端」选项。

• 在代码中正确获取变量
  现在可以直接通过import.meta.env.VITE_XXX的形式读取变量，比如：

  console.log(import.meta.env.VITE_AMPLIFY_API_URL);
  

  注意：Vite会自动过滤掉非VITE_开头的变量，所以直接打印整个import.meta.env时，只会显示符合规则的变量和默认的process_env，这是正常的安全机制。

• 注意后端变量的区别
  如果是Amplify后端使用的敏感变量（如AWS密钥），不要添加VITE_前缀，也不要勾选客户端暴露，这类变量只能在Amplify的后端函数中通过process.env访问，不能在前端代码中获取。

内容的提问来源于stack exchange，提问作者Kim Joseph Penaloza