Vue 配置代理：优化前端开发环境

最新推荐文章于 2025-09-25 14:30:23 发布
最新推荐文章于 2025-09-25 14:30:23 发布
阅读量310 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/api_git355/article/details/133361248
本文介绍了在Vue项目中如何配置代理以解决开发阶段的跨域问题。通过修改vue.config.js文件，设置代理目标和路径重写，使得前端可以顺利与后端API交互。代理配置仅在开发环境生效，打包部署后不适用。

在前端开发过程中，经常会遇到需要与后端 API 进行交互的情况。然而，在开发阶段，前端通常会面临跨域的问题，这会导致浏览器阻止请求的发送。为了解决这个问题，Vue 提供了一种简单且有效的方式来配置代理，以便在开发环境中顺利进行 API 请求。本文将介绍如何在 Vue 项目中配置代理，并提供相应的源代码示例。

首先，打开 Vue 项目的根目录，在根目录下找到 vue.config.js 文件。如果该文件不存在，可以手动创建一个。这个文件是用来配置 Vue 项目的一些构建选项。

接下来，我们需要在 vue.config.js 文件中添加代理配置。下面是一个基本的代理配置示例：

module.exports = {
   
   
  devServer: {
   
   
    proxy:
了解本专栏 订阅专栏 解锁全文
Vue项目代理配置
King Saj
12-22 906
此处配置是vue-cli3中！！！ proxy在vue-cli3项目中使用，在vue.config.js配置； 在cli2中使用的是proxyTable在config/index.js 里配置proxyTable内容 vue.config.js配置 module.exports = { devServer: { proxy: { '/dev-api': { // 1.dev-api这个值 的意义在于，声明axios中url已.
前端开发环境：Vue、Element Plus、Axios
hitmengfanchao的博客
06-05 3862
本文介绍了前端开发环境的搭建，包括：Vue项目创建、在Vue项目中引入Element-Plus和Axios。通过一个简单的登录程序说明如何开发基于Vue的前端项目。
vue配置代理
zebrar的博客
01-21 531
在前端开发中，通过设置一个中间层服务器来转发请求，解决跨域问题。（代理服务器充当客户端和目标服务器之间的中间人，将客户端发送的请求转发到目标服务器，并将目标服务器返回的响应返回给客户端。
Vue 配置代理
最新发布
dlmyrt的博客
09-25 833
Vue 代理就像 “前端和后端之间的快递员”：前端把包裹（请求）交给快递员（代理），快递员帮你送到后端，再把后端的回信（响应）带给前端，避开了浏览器这个 “保安” 的拦截。
Vue配置代理
qq_48306453的博客
04-14 4829
在主目录下，创建vue.config.js 例如： app - src - main.js - App.vue -vue.config.js 方法一：只能配置一个代理服务器 module.exports = { pages: { index: { //入口 entry: 'src/main.js', }, }, ...
前端开发：Vue安装及环境配置详述与应用场景
03-20
适合人群：适用于希望从零开始学习或巩固Vue基础知识，有志成为Web前端开发人员的学习者。 使用场景及目标：主要服务于有意采用Vue作为前端技术栈，用于网站应用开发的技术新手或是寻求更优解决方案的专业开发者，在...
前端开发：Vue CLI 脚手架代理配置解决跨域问题
03-15
内容概要：本文详细介绍了在Vue CLI环境中配置代理以解决前后端跨域通信的问题。主要涵盖的内容包括跨域的基本概念解释了同源策略的意义，代理的运作机制及其对前端开发的帮助。文章列举并解析了两种常见的代理配置...
Mac快速搭建前端环境&创建前端项目【Vue】
weixin_45565886的博客
05-22 3752
Mac快速搭建前端环境&创建前端项目【Vue】
【vue】 配置代理、解决跨域问题
热门推荐
liangjiayy的博客
10-11 2万+
尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=95axios官网教程：https://axios-http.com/docs/introvue配置代理：https://cli.vuejs.org/zh/config/#devserver-proxy安装axios发送ajax请求： 使用：(官网：https://axios-http.com/docs/example)也就是： 官网：https://cli.vuejs.org/zh/config/#de
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2364
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
Vue技术——配置代理
qq_43595018的博客
12-26 1394
请看---跨域产生的原因以及解决方案总给一下：就是。
Vue设置代理
weixin_52063946的博客
07-27 554
1、介绍 这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。 2、实际代码 //vue-cli3.0 里面的 vue.config.js做配置 devServer: { proxy: { '/rng': { //这里最好有一个 / target: 'http://45.105.124.130:8080', // 后台接口域名
vue设置代理
qq_40820382的博客
02-01 767
参考这个 https://www.jianshu.com/p/5ef2b17f9b25 1、介绍 这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块（这个模块相当于是node.js的一个插件）。 2、实际代码 我的 api=’/rng’ 我的请求地址 ${api}/xxxx/xxx ，请求地址就为 ‘/rng/xxxx/xxx’ 当node服务器 遇到 以 ‘/rng’ 开头的请求，就会把 target 字段加上，那么我的请求地址就为 http://
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值