Vue.js项目通过Github Actions部署至S3时环境变量无法注入构建的解决方案咨询

这是个很常见的场景——不想把包含敏感信息的.env文件提交到代码仓库，同时又要让GitHub Actions在构建过程中正确读取这些环境变量。结合你的Vue项目配置，我给你两个可行的解决方案：

方案1：直接在GitHub Actions workflow中注入环境变量 #

Vue CLI会自动识别所有以VUE_APP_开头的环境变量，所以你可以直接在构建步骤中将GitHub Secrets导出为环境变量，再执行构建命令：

1. 首先，在你的GitHub仓库的「Settings」→「Secrets and variables」→「Actions」里，添加两个Secrets：

   • VUE_APP_RZ_KEY：值为你的<Secret_Key>
   • VUE_APP_API_URL：值为你的<API_URL>

2. 修改你的GitHub Actions workflow文件（通常是.github/workflows/deploy.yml），在构建步骤中注入这些变量：

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '16' # 替换成你项目使用的Node.js版本
          
      - name: Install dependencies
        run: npm install
        
      - name: Build Vue app with environment variables
        # 直接在构建命令前注入变量，Vue CLI会自动读取
        run: |
          VUE_APP_RZ_KEY=${{ secrets.VUE_APP_RZ_KEY }} \
          VUE_APP_API_URL=${{ secrets.VUE_APP_API_URL }} \
          npm run build
          
      - name: Deploy to S3
        # 这里保留你现有的S3部署步骤，比如：
        # uses: aws-actions/configure-aws-credentials@v4
        # with:
        #   aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        #   aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        #   aws-region: us-east-1
        # - uses: aws-actions/s3-sync@v3
        #   with:
        #     source: dist/
        #     destination: s3://your-bucket-name/

方案2：动态生成.env.production文件 #

如果想和本地开发的逻辑保持一致（让Vue CLI自动加载对应mode的env文件），可以在GitHub Actions中动态生成.env.production文件：

1. 同样先在GitHub仓库中添加好上述两个Secrets。

2. 在workflow的构建步骤前，添加生成.env.production的命令：

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm install
        
      - name: Generate .env.production file
        run: |
          echo "VUE_APP_RZ_KEY=${{ secrets.VUE_APP_RZ_KEY }}" >> .env.production
          echo "VUE_APP_API_URL=${{ secrets.VUE_APP_API_URL }}" >> .env.production
          
      - name: Build Vue app
        run: npm run build # 此时Vue CLI会自动读取刚生成的.env.production文件
          
      - name: Deploy to S3
        # 保留你的S3部署步骤

关键注意事项 #

• 确保GitHub Secrets的名称和环境变量名称完全一致（大小写敏感），比如VUE_APP_RZ_KEY不能写成vue_app_rz_key。
• Vue CLI要求环境变量必须以VUE_APP_开头，你当前的变量命名已经符合要求，无需修改。
• 可以在GitHub Actions的构建日志中验证变量是否正确注入（敏感值会被自动掩码，无法看到具体内容，但能确认变量已被传递）。

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