基于AWS Amplify部署Vite应用：配置分支对应后端URL

1. 前端代码统一用环境变量替代硬编码 #

在你的Vite项目里，别直接写死后端地址，全用Vite的环境变量来引用。比如接口请求的时候用import.meta.env.VITE_BACKEND_URL，这样后续不管环境怎么变，只要改变量就行。
可以在项目根目录整个.env.example模板文件，方便团队成员参考：

VITE_BACKEND_URL=

2. 在AWS Amplify里给分支配专属环境变量 #

打开Amplify控制台找到你的应用：

• 点左侧的「环境变量」，再点「管理变量」
• 分别给两个分支加变量：
  • development分支：键填VITE_BACKEND_URL，值填backend-dev.domain.com
  • main分支：键填VITE_BACKEND_URL，值填backend.domain.com
    Amplify会在构建阶段把这些变量传给Vite，Vite自动识别VITE_开头的变量，直接能用。

3. 构建配置的调整（可选） #

如果你的Amplify构建命令是默认的npm run build，其实不用额外改——Vite会自动读取环境变量完成替换。要是你有自定义构建流程，也可以在amplify.yml里明确写出来：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - VITE_BACKEND_URL=$VITE_BACKEND_URL npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

不过一般默认配置就够了，没必要多此一举。

4. 验证效果 #

推代码到development分支触发构建，完事之后访问app-dev.domain.com，检查接口请求地址是不是backend-dev.domain.com；再推代码到main分支，验证app.domain.com调用的是backend.domain.com。

这套方案核心就是用Vite的环境变量机制，搭配Amplify的分支变量配置，既避免硬编码的麻烦，又能完美实现不同分支对应不同后端环境的隔离需求。

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