我正在尝试在 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>
我没有看到这个变量出现。为了访问环境变量并将其显示在我的组件中,我还需要做些什么吗?
最佳答案
如 https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code 中所述
Only variables that start with
VUE_APP_
will be statically embedded into the client bundle withwebpack.DefinePlugin
. You can access them in your application code:
console.log(process.env.VUE_APP_SECRET)
关于javascript - 如何在 VueJS 项目的构建时使用环境变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54792619/