如何调用vue.config.js的url

在 Vue.js 项目中，vue.config.js 通常用于配置 webpack 和其他构建工具的行为。如果你想要在 Vue.js 项目中使用 vue.config.js 中配置的 URL，可以在组件中使用 axios 或 fetch 等 HTTP 请求库来访问该 URL。

在组件中使用 axios 发起请求的代码示例如下：

import axios from 'axios'

export default {
  data() {
    return {
      responseData: null
    }
  },
  mounted() {
    axios.get('/api/my-data')
      .then(response => {
        this.responseData = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在以上代码中，axios.get() 方法中传入的 URL 是相对于当前应用程序的根目录的相对路径，这个路径就是在 vue.config.js 中配置的 publicPath 值。如果你在 vue.config.js 中的 publicPath 属性中设置了一个不同的路径，则需要相应地修改 axios.get() 方法中的 URL，以确保能够正确地访问到你想要的资源。

另外，也可以使用 process.env.VUE_APP_BASE_API 变量来获取在 vue.config.js 中配置的 API 的 URL，例如：

import axios from 'axios'

export default {
  data() {
    return {
      responseData: null
    }
  },
  mounted() {
    axios.get(`${process.env.VUE_APP_BASE_API}/my-data`)
      .then(response => {
        this.responseData = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在以上代码中，axios.get() 方法中的 URL 使用了模板字符串，其中 ${process.env.VUE_APP_BASE_API} 变量就是在 vue.config.js 中配置的 API 的 URL。这种方法可以确保在不同的环境中使用不同的 API URL，例如在开发环境和生产环境中使用不同的 API URL。