时间戳

首页 > 解决方案 > 如何使用 GitLab 为具有多个 .env 文件的 Vue 应用程序进行单个构建

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

问题描述

我有一个简单的 .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 文件？

标签： vue.jswebpackgitlabenvironment-variablesgitlab-ci

解决方案

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

.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

在这个片段中，我使用了锚点来避免重复的行。

推荐阅读