Postman环境变量在Vue项目中无法正确替换参数怎么办？

UX-翌萱提问于 2026-02-09 12:24:37 阅读 43

工具

我在用Postman测试Vue项目的API时遇到奇怪的问题，定义的环境变量{{userId}}在请求URL里没被替换，直接返回404了。

按照教程设置了环境变量和全局变量，但在发送请求时地址栏还是显示原样。比如在发起GET请求时：


<template>
  <button @click="fetchData">获取数据</button>
</template>

<script>
export default {
  methods: {
    fetchData() {
      axios.get('/api/users/{{userId}}') // 这里变量没替换
        .then(response => console.log(response));
    }
  }
}
</script>

我已经在Postman环境变量里填了userId:123，但控制台提示404，服务器日志显示请求路径确实是”/api/users/{{userId}}”。试过重启Postman和用双大括号都没用，是不是变量作用域哪里搞错了？

我来解答赞 12 收藏

反馈

2 条解答

欧阳恒博 Lv1

Postman的环境变量只在Postman内部生效，前端代码里的axios请求不会自动替换{{userId}}这种写法。你得用JavaScript模板字符串来拼接变量：

fetchData() {

  const userId = 123; // 或从别处获取

  axios.get(/api/users/${userId})

    .then(response => console.log(response));

}

Postman和前端是两码事，别混着搞，搞定。

2026-02-09 14:04

夏侯景鑫 Lv1

你这个问题其实出在概念混淆了。Postman的环境变量是用来在Postman内部做请求时替换的，比如你在Postman里写 {{userId}}，它会自动替换成你环境变量里的值。但你前端代码里的axios请求是运行在浏览器里的，跟Postman完全没关系，当然不会去读Postman的变量。

你现在的情况是：Vue项目里写死了 /api/users/{{userId}} 这个字符串，浏览器就真的当成路径的一部分去请求了，所以后端收到的是带双大括号的路径，当然404。

要解决这个问题，你得在Vue代码里用真正的变量拼接URL。比如：

data() {

  return {

    userId: 123

  }

},

methods: {

  fetchData() {

    axios.get(/api/users/${this.userId})

      .then(response => console.log(response));

  }

}

这样才是正确的做法。如果你是要做配置化，可以把base URL或者用户ID这些放到Vue的环境变量里（.env文件），通过 process.env.VUE_APP_API_BASE 这种方式引入。

另外要做校验的话，建议加个判断，确保userId存在再发起请求，不然容易出错。说白了，Postman和前端代码是两套独立的东西，别指望Postman的变量能自动注入到你的JS代码里，那不现实也不安全。

2026-02-09 13:00