Jenkins 参数化构建时如何传递动态参数给前端 Vue 项目？

诸葛欣辰提问于 2026-02-23 21:08:22 阅读 29

工具

我在 Jenkins 里配置了参数化构建，比如 BRANCH_NAME 和 API_ENV，但不知道怎么把这些参数传进我的 Vue 项目里用。试过在 vue.config.js 里读 process.env，但好像拿不到 Jenkins 的参数，页面上还是默认值。

这是我的 Vue 组件里用环境变量的地方：

<template>
  <div>当前环境: {{ env }}</div>
</template>

<script>
export default {
  data() {
    return {
      env: process.env.VUE_APP_API_ENV || 'development'
    }
  }
}
</script>

Jenkins

我来解答赞 5 收藏

反馈

1 条解答

Des.熙晨 Lv1

应该是你没在 Jenkins 构建时把参数注入进 Vue 的构建流程里，得在 Jenkins 的 shell 步骤里显式传给 npm build，比如：

npm run build -- --mode $API_ENV --branch $BRANCH_NAME

然后在 vue.config.js 里用 process.env 拿到这些参数，或者更稳妥的是用 --define 插件参数：

npm run build -- --define:VUE_APP_API_ENV="$API_ENV" --define:VUE_APP_BRANCH="$BRANCH_NAME"

再在 Vue 代码里用 import.meta.env.VUE_APP_API_ENV（Vue3）或 process.env.VUE_APP_API_ENV（Vue2）都能拿到真实值了。

2026-02-23 21:09