你的思路非常合理——把重复URL抽成常量能大幅提升代码可维护性，但直接写带变量的模板字符串会因为变量作用域问题失效：毕竟在constants.js导出时，var1和var2根本不存在呀！下面给你两种实用的解决方式：

方法一：用函数生成动态URL（推荐） #

把URL常量改成接收参数的函数，在需要的时候传入变量生成最终URL，这种方式灵活且不易出错：

修改constants.js #

// 改成函数，接收变量参数后返回拼接好的URL
export const getUseVariablesUrl = (var1, var2) => 
  `https://myapiserver.com/iNeedVar1Here/${var1}/iNeedVar2here/${var2}`;

在Vue组件中使用 #

import { getUseVariablesUrl } from './constants.js';

// 你的组件方法里
getItem() {
  const var2 = this.formValues.item2;
  const var1 = this.formValues.item1;
  // 注意：你原来的代码里`item`变量未定义，这里改成判断实际需要的变量是否存在
  if (var1 != null && var2 != null) {
    // 调用函数传入变量，生成正确的请求URL
    const requestUrl = getUseVariablesUrl(var1, var2);
    axios.get(requestUrl)
      .then((res) => { console.log(res.data) })
      .catch(err => console.log(err));
  } else {
    alert('Select an item before proceeding')
  }
}

方法二：用占位符替换（适合简单场景） #

如果不想用函数，也可以给URL设置占位符，在使用时替换成实际变量：

修改constants.js #

// 用占位符标记变量位置
export const useVariables = 
  'https://myapiserver.com/iNeedVar1Here/{var1}/iNeedVar2here/{var2}';

在Vue组件中使用 #

import { useVariables } from './constants.js';

// 你的组件方法里
getItem() {
  const var2 = this.formValues.item2;
  const var1 = this.formValues.item1;
  if (var1 != null && var2 != null) {
    // 替换占位符为实际变量
    const requestUrl = useVariables
      .replace('{var1}', var1)
      .replace('{var2}', var2);
    axios.get(requestUrl)
      .then((res) => { console.log(res.data) })
      .catch(err => console.log(err));
  } else {
    alert('Select an item before proceeding')
  }
}

两种方式都能解决你的问题：函数式写法更适合变量较多或需要复杂拼接的场景，占位符替换则更直观简单。另外提醒下你原来代码里的item变量未定义，记得改成判断实际需要的var1/var2是否存在哦～

内容的提问来源于stack exchange，提问作者user17595824