Vue.js中如何拼接环境变量、路径与输入值？

错误根源 #

出现undefined的核心原因几乎都是baseAPI变量未正确获取到环境变量值，具体可能是以下两种情况：

• 环境变量命名不符合Vue CLI规范：Vue CLI只会注入以VUE_APP_为前缀的环境变量，你配置的VUE_BASE_API不满足这个规则，导致process.env中读取不到该值，最终baseAPI为undefined。
• baseAPI未在组件中正确引入：如果你是单独导出的baseAPI，但组件代码里没有通过import语句引入这个变量，也会导致变量未定义。

另外，虽然概率极低，但如果userSearchInputValue没在组件的data选项中声明，也可能引发异常，但从你绑定v-model并传入函数参数的写法来看，这种情况可能性很小。

正确实现拼接的步骤 #

1. 修正环境变量命名 #

把环境变量改为符合规范的格式：

VUE_APP_BASE_API=http://111.123.144.45:5331

修改后必须重启开发服务器，否则新的环境变量不会生效。

2. 正确导出并引入baseAPI #

在项目中创建工具文件（比如src/utils/apiConfig.js）：

// 从process.env中读取规范命名的环境变量
export const baseAPI = process.env.VUE_APP_BASE_API

然后在你的组件文件顶部导入：

import { baseAPI } from '@/utils/apiConfig'

3. 安全拼接请求地址（推荐用法） #

手动拼接URL容易出现格式问题，建议使用axios的params参数自动处理查询字符串：

searchUser(userSearchInputValue) {
  axios.get(`${baseAPI}/api/Users/GetUser`, {
    params: {
      Name: userSearchInputValue
    }
  })
  .then(res => {
    console.log(res.data)
  })
  .catch(err => {
    console.log(err)
  })
}

如果坚持手动拼接，确保baseAPI和变量都存在的情况下，写法应为：

axios.get(`${baseAPI}/api/Users/GetUser?Name=${userSearchInputValue}`)

内容的提问来源于stack exchange，提问作者martin-den