Vue 脚手架配置代理

1、简单配置

在 vue.config.js 中简单配置代理规则

devServer: {
	proxy: 'http://localhost:5000'  // 代理目标的基础路径
}

优点：配置简单，请求资源时直接发给前端即可

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

注意：当请求了前端不存在的资源时，请求会转发给服务器（优先匹配前端资源）

---

2、具体配置

在 vue.config.js 中具体配置代理规则

devServer: {
        proxy: {
            '/Abc': {  // 匹配所有以 /Abc 开头的请求路径
            target: 'http://localhost:5000',  // 代理目标的基础路径
            pathRewrite: {'^/Abc': ''},
            changeOrigin: true  // 用于控制请求头的 host 值
        },
           	'/demo': {
            target: 'http://localhost:5001',
            pathRewrite: {'^/demo': ''},
			changeOrigin: true
		},
	}
}

优点：可以配置多个代理，且可以灵活的控制是否走代理

缺点：配置繁琐

注意：请求资源时必须加前缀

---

对比二者：发现 方法二 较好，但是如果只是简单的代理 方式一 也能够胜任

需要注意：使用 方式一 时需要保证前端里的资源不要与请求的后端资源重复

---