Vue-CLI3.x 设置反向代理的方法
最近在项目中使用了VueCLI3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。
如何安装vue-cli3呢？
首先，你要有一个nodejs环境
Node版本要求
VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。
其次，如果你之前安装了vue-cli的旧版本，那么你要做如下操作
关于旧版本
VueCLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)，你需要先通过npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它。
假设你已有了nodejs环境，你可以通过下面指令安装vue-cli3的包
npminstall-g@vue/cli #OR yarnglobaladd@vue/cli
安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。（例如vue--version）
新建配置文件
在项目的根目录下新建vue.config.js文件，自VueCLI3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）。
配置反向代理
设置代理
module.exports={
devServer:{
//设置代理
proxy:{
"/v1":{
target:"http://127.0.0.1:8081/",//域名
ws:true,//是否启用websockets
changOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRequiresRewrite:{
"^/v1":"/"
}
}
}
}
};
在请求中使用
//'/v1'等于'http://127.0.0.1:8081/v1'
//此时请求地址为'http://127.0.0.1:8081/v1/picture?method=upload'
get('/v1/picture?method=upload')
更多
更多内容请参考VueCLI官方文档https://cli.vuejs.org/zh/config/#devserver-proxy
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。