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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (622)

我正在尝试在buildVueJS应用程序的CI作业阶段使用环境变量。我正在使用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>

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

提问于
用户回答回答于

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

用户回答回答于

如果您正在使用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.jsdev.env.js文件看起来像

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

如果您想更密切地匹配vue进程,可以使用RegExp过滤掉对象键/^VUE_APP_.*/

然后在.vue文件的数据部分中,您可以使用以下命令包含这些:

data: {
  VUE_APP_MODE: process.env.VUE_APP_MODE
}

扫码关注云+社区

领取腾讯云代金券