如何使用 GitLab 为具有多个 .env 文件的 Vue 应用程序进行单个构建

Question

我有一个简单的 .gitlab-ci.yml 文件来构建我的 Vue 应用程序。我构建一次，然后将dist 文件夹部署到我的各种环境中：

stages:
  - build
  - deploy_dev
  - deploy_stg
  - deploy_prd

build: 
  image: node:latest  # Pull Node image
  stage: build
  script: 
    - npm install -g @vue/cli@latest
    - npm install
    - npm run build
  artifacts:
    expire_in: 2 weeks
    paths:
      - dist/

deploy_to_dev:
  image: python:latest
  stage: deploy_dev
  dependencies:
    - build
  only:
    - master  # Only deply master branch automatically to Dev
  script:
    - export AWS_ACCESS_KEY_ID=$DEV_AWS_ACCESS_ID
    - export AWS_SECRET_ACCESS_KEY=$DEV_AWS_ACCESS_KEY
    - pip install awscli  # Install AWS CLI
    - aws s3 sync ./dist s3://$DEV_BUCKET

这一切都很好，但是，我现在已经介绍了一些配置，并在每个环境中以不同的方式构建我的应用程序 - 对于 3 个环境，我有 3 个不同的构建命令。例如，我有一个.env.production，所以对于生产版本，我的命令变为：

npm run build -- --mode production

有什么方法可以解决每个环境的不同构建问题，但仍然使用基于 GitLab 变量的 .env 文件？

Answer 1

您应该将构建作业拆分为每个环境一个，并使用environment concept 为dev 和production envs 提供类似的东西：

.build_template: &build_template
image: node:latest  # Pull Node image
script: 
  - npm install -g @vue/cli@latest
  - npm install 
  - npm run build -- --mode $CI_ENVIRONMENT_NAME

build_dev:
  stage: build_dev
  <<: *build_template  
  environment:
    name: dev

build_prod:
  stage: build_prod
  <<: *build_template      
  environment:
    name: production

在这个 sn-p 中，我使用anchors 来避免重复行。