Vue.js学习笔记-脚手架配置

少你三行代码

已于 2022-02-04 14:32:44 修改

阅读量556

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2022-02-04 14:25:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54152856/article/details/122782451

版权

笔记专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了在Vue项目中配置代理的两种方法，以解决跨域问题。方法一是在vue.config.js中设置devServer.proxy为指定服务器地址，简单但不灵活。方法二是定义多个代理规则，如'/api1'和'/api2'分别对应不同端口，提供更精细的控制。这两种方法都能将前端请求转发到相应后端服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue脚手架配置代理

```

方法一:

在vue.config.js中添加如下配置：

        devServer：{

            proxy:"http://localhost:5000"

        }

说明：

1、优点：配置简单，请求资源时直接发送给前端（8080）即可

2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3、工作方式：若按照上述配置代理，当请求了前端不存在的资源师，那么该请求将会转发给服务器（优先匹配前端资源）

方法二:

编写vue.config.js配置具体代理规则

        module.exports = {

            devServer:{

                proxy:{

                    '/api1':{ //匹配所有以'/api1'开头的请求路径

                        target:"http://localhost:5000",

                        changeOrigin:true,

                        pathRewrite:{'^/api1':''}

                    },

                    '/api2':{ //匹配所有以'/api2'开头的请求路径

                        target:"http://localhost:5001",

                        changeOrigin:true,

                        pathRewrite:{'^/api2':''}

                }

            }

        }

```