时间戳

首页 > 解决方案 > 如何使用 Gitlab 将 Git 提交哈希注入 Vue 应用程序？

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

问题描述

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

如何在 VueJS 项目的构建时使用环境变量

但就是不能让它工作。未为应用设置 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

标签： vue.jsgitlab

解决方案

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

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

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

env | grep 'VUE_APP_' > .env

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

  • VUE_APP_VAR1=foo
  • VUE_APP_VAR2=酒吧
  • VUE_ACCEPT_VAR1=foo
  • VUE_ACCEPT_VAR2=条

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

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

推荐阅读