修改Vue2项目运行端口号配置后端代理教程
作者:qq_53154643
文章介绍了在Vue2项目中配置端口号和代理解决跨域问题的方法,包括在vue.config.js文件中增加端口号配置和设置代理路径
一.端口号简单配置
在Vue2项目的vue.config.js文件中增加如下配置:
module.exports={
//...
devServer:{
port:8888//此处修改你需要的端口号
}二.配置proxy代理
1.简单配置单个代理
请求到/api/xxx现在会被代理到请求 http://localhost:8888/api/xxx
例如 /api/user 现在会被代理到请求 http://localhost:8888/api/user
modile.exports={
//...
devServer:{
proxy:{
'/api':'http://localhost:8888'
}
}
}2.配置多个代理路径
将多个路径代理到同一个target下,你可以使用由一个或多个具有context属性的对象构成的数组:
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:8888',
}]
}
};3.解决跨域问题
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true,//开启代理:在本地会创建一个虚拟服务端,然后
//发送请求的数据,并同时接收请求的数据,这样服务
//端和服务端进行数据的交互就不会有跨域问题
}
}
}
};总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
