修改Vue2项目运行端口号配置后端代理教程
更新时间：2026年01月12日 09:55:06 作者：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,//开启代理：在本地会创建一个虚拟服务端，然后
//发送请求的数据，并同时接收请求的数据，这样服务
//端和服务端进行数据的交互就不会有跨域问题
}
}
}
};总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue单个组件实现无限层级多选菜单的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,在创建项目时,如果遇到npm安装报错,通常是由于依赖版本冲突造成的,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-09-09
本篇文章主要介绍了Vue响应式原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要给大家介绍了关于如何解决前端调用后端接口返回200但数据返回的是html标签的相关资料,文中通过图文将解决的过程介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考解决价值,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
这篇文章主要为大家详细介绍了vue3实现旋转图片验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3中watch和watchEffect实战梳理，watch和watchEffect都是vue3中的监听器，但是在写法和使用上是有区别的。下文介绍他们之间的方法及区别，需要的朋友可以参考一下2022-07-07
这篇文章主要为大家详细介绍了如何在Vue3中使用jsx/tsx的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以了解下2024-02-02
最新评论