比如说下面是自己封装的请求相同部分的url
export const axiosUrl = 'http:/www.easy-mock.com'
和跨域代理里
proxy: {
'/apis': {
target: 'https:/http:/www.easy-mock.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' "",
}
}
}
使用的时候 this.我自己封装的axios 和 这个代理出来的 apis 会不会冲突呀 我使用的时候 是不是 直接用我自己封装的就可以了?
该回答引用GPTᴼᴾᴱᴺᴬᴵ
不会冲突,使用时可以直接使用自己封装的 axios。这是因为,Vue CLI 的开发服务器在代理请求时,会优先匹配 proxyTable 中的规则,如果找到匹配的规则,则将请求转发到对应的目标地址。如果没有找到匹配的规则,则会根据静态资源路径和 API 路径来确定是否存在 API 请求,然后再通过自己封装的 axios 进行发送请求。
在你的代码中,/apis 前缀只是为了表示这个请求是需要通过代理服务器进行转发的,最终实际发送的请求仍是 http:/http://www.easy-mock.xn--com%2C-jb5ft9cvz8bf7lozj134c38ifsdgr8h.xn--%2C-w96az9ueuf3ucf65acupvrcj22brvp/ axios 发送请求时,不需要使用 /apis 前缀,直接使用 http:/http://www.easy-mock.com/ 即可。
举个例子:
import { axiosUrl } from '@/api' // 引入自己封装的 axios 相关配置
export default {
methods: {
fetchData() {
const url = `${axiosUrl}/api/data` // 组合完整的请求 URL
this.$axios.get(url).then(response => {
console.log(response.data)
})
}
}
}
上述代码中,我们引入了自己封装的 axios 配置,并使用 ${axiosUrl}/api/data 组合出了完整的请求 URL。在发送请求时,使用了 Vue CLI 默认提供的 $axios 方法进行发送。
希望这些信息能够解决你的问题。