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

【问题标题】：How to use environment variables at build time in a VueJS project如何在 VueJS 项目的构建时使用环境变量
【发布时间】：2019-07-14 12:19:25
【问题描述】：

我正在尝试在 VueJS 应用程序的 CI 作业的 build 阶段使用环境变量。我正在使用 GitLab CI，其中一个可用的环境变量是 CI_COMMIT_SHORT_SHA，

build:
  image: node:latest
  stage: build
  variables:
    CI_COMMIT_SHORT_SHA: "$CI_COMMIT_SHORT_SHA"
  artifacts:
    paths:
      - dist/
  script:
    - npm install --progress=false
    - npm run build
    - echo "Build Complete"

这是我尝试在 Vue 中使用此变量的方式：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>This is a static site that is served with a CloudFront distribution in front of an S3 bucket.</p>
    <p>The site is updated through a GitLab CI/CD pipeline.</p>
    <p>Commit ref: {{ commit }}</p>
    <p>Using cache invalidation</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      commit: process.env.CI_COMMIT_SHORT_SHA
    }
  }
}
</script>

我没有看到这个变量通过。为了访问环境变量并将其显示在我的组件中，我还需要做些什么吗？

【问题讨论】：

你在使用 webpack 编译你的 SFC 吗？
@CodyG。我应该补充一点，这是一个 Vue CLI 3 生成的项目。所以是的，它在后台使用 webpack
好吧，process.env.CI_COMMIT_SHORT_SHA 可能在您导出的代码中，当在浏览器中运行时，它显然没有...我不知道如何将它包含在我的顶部头，但我正在调查它
对，所以我想弄清楚如何在构建时使用这种环境变量
我会做...个人...是让您的构建过程吐出一个 server_props.js 文件，您只需将其导入您的 vue 模板...所以 server_props.js ：module.exports = { vue_server_props: { commit: blahblah } }然后在你的 vue 模板中 import {vue_server_props} from './config.js; 然后把它放到你的 data() 中

标签： javascript vue.js npm gitlab-ci

【解决方案1】：

如果您使用webpack.config，您可以以类似的方式设置DefinePlugin。

在您的webpack.config.js 中，您将使用一个新插件，

new webpack.DefinePlugin({
  /* 
    JSON.stringify(yourconfig) is highly recommened 
    to avoid overwriting existing keysother process.env
  */
  'process.env': JSON.stringify(config.prod), // or config.dev
}),

config.prod / config.dev 类似于

let config = {};
config.prod = require('./config/prod.env'); // imports ./config/prod.env.js
config.dev = require('./config/dev.env');

在文件的顶部，

prod.env.js 和 dev.env.js 文件看起来像

'use strict';
module.exports = {
  VUE_APP_MODE: 'MYMODE'
};

如果你想更紧密地匹配 vue 进程，你可以使用 RegExp /^VUE_APP_.*/ 过滤掉对象键。

然后在 .vue 文件的数据部分中，您可以使用：

data: {
  VUE_APP_MODE: process.env.VUE_APP_MODE
}

【讨论】：

【解决方案2】：

如https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code中所述

只有以VUE_APP_ 开头的变量才会以webpack.DefinePlugin 静态嵌入到客户端包中。您可以在应用程序代码中访问它们：

console.log(process.env.VUE_APP_SECRET)

【讨论】：

【解决方案3】：

经过一些研究，vue-cli-service build 命令似乎只查看项目根目录中的点文件，并且只处理以VUE_APP_ 开头的这些变量（在各种 .env 文件中）

您可以在 Gitlab CI 选项中设置所有变量，然后将这些变量复制到 .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

【讨论】：