标签：cal prot 网站 最简 更改 set 打包 user item
在使用vue时，免不了要使用axios来经常请求数据、调用开发好的webapi，但是webapi在调试模式和部署模式下两者的地址和端口都是不一样的，这就需要我们在vue中定义一个全局的地址了，方便打包和调试用。
var url=‘http://192.168.3.11:5000/api/user/login‘
this.axiosPost(url,params) .then(res=>{ if (res===401){ this.$message.error(‘哦，对不起，你所输入的用户名或密码有误！‘); }else{ localStorage.setItem("token",res); this.$router.push(‘/list‘); } })
这种是把请求地址写成固定的了，也是最不方便的一种方式了，如果请求的接口地址变了，那么需要替换掉所有的url，只适合单页面来做个例子，不适合在实际中使用。
var url=‘/api/user/login‘
这种相对地址使用时，在使用vs code调试时，接口前面的网址就是调试时打开的网址和端口，会发现它和webapi不能是一个端口号，自然不能使用。
但是可以在打包时使用，然后把前端和后端部署到一个网站里。
想要实现改一个参数就改变所有的url，就需要用到全局变量了，网上有各种各样的实现方式，不过我感觉最简单的还是通过main.js中的vue.prototype来实现最方便了，调用也方便。
Vue.prototype.$baseUrl=‘http://192.168.3.11:5000‘
然后在需要使用此地址的vue页面中直接使用就可以了
var url=this.$baseUrl+‘/api/User/UserLogin‘; this.axiosPost(url,params) .then(res=>{ if (res===401){ this.$message.error(‘哦，对不起，你所输入的用户名或密码有误！‘); }else{ localStorage.setItem("token",res); this.$router.push(‘/list‘); } })
等需要正式打包发布的时候只需要在main.js中更改一下$baseurl的值就可以了。
标签：cal prot 网站 最简 更改 set 打包 user item
原文地址：https://www.cnblogs.com/wjbych/p/12892821.html
