vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 修改Vue2项目运行端口号配置后端代理

修改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,//开启代理:在本地会创建一个虚拟服务端,然后                        
                                               //发送请求的数据,并同时接收请求的数据,这样服务                                                                        
                                               //端和服务端进行数据的交互就不会有跨域问题
            }
        }
    }
};

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文