如何使用 Gitlab 将 Git 提交哈希注入 Vue 应用程序？

【问题标题】：How to inject Git commit hash using Gitlab to Vue app?如何使用 Gitlab 将 Git 提交哈希注入 Vue 应用程序？
【发布时间】：2020-02-27 05:55:47
【问题描述】：

我想将 Git 哈希打印到我的 Vue.js 应用的页脚中。我已按照此问题中的说明进行操作：

How to use environment variables at build time in a VueJS project

但就是不能让它工作。未为应用设置 process.env.VUE_APP_GIT_COMMIT 变量。 .env 文件中设置的变量可以正常工作。

.gitlab.ci.yml:

build-frontend:    
   image: node:10.16.3-stretch  
   stage: build
   before_script:
      - cd frontend
   variables:
      VUE_APP_GIT_COMMIT: "$CI_COMMIT_SHORT_SHA"      
   script:
      - npm install -g @vue/cli@3.11.0   
      - npm install    
      - npm run staging
   artifacts:    
      paths:
         - frontend/dist/ 
      expire_in: 1 hour

deploy-staging-frontend:  
   image: python:3.7.4
   stage: deploy  
   script:    
      - pip install awscli   
      - aws s3 sync --delete frontend/dist s3://bucket

【问题讨论】：

试写：before_script: - echo "VUE_APP_GIT_COMMIT=$CI_COMMIT_SHORT_SHA" >> .env

标签： vue.js gitlab

【解决方案1】：

好的，经过一些研究，vue-cli-service build 命令似乎只查看项目根目录中的点文件。（各种 .env 文件）

您可以在 Gitlab CI 选项中设置所有变量，然后如 Sergey 在 cmets 中所述，将这些变量复制到 .env 文件中。现在，当 vue-cli 构建项目时，它会将这些值注入到转译的脚本中。

您可以在构建项目之前发出这样的命令：

env | grep 'VUE_APP_' > .env

我还使用了在推入暂存分支时构建的暂存环境。因此我将这些变量设置到 Gitlab 中：

VUE_APP_VAR1=foo
VUE_APP_VAR2=bar
VUE_ACCEPT_VAR1=foo
VUE_ACCEPT_VAR2=bar

由于 vue-cli 希望变量以 VUE_APP_ 开头，我用 sed 替换：

env | grep 'VUE_ACCEPT_' | sed 's/VUE_ACCEPT_/VUE_APP_/' > .env

【讨论】：