- 什么情况下需要使用代理？
- 如果您的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。
需要配置vue.config.js，vue.config.js是一个可选的配置文件，配置参考地址。如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
配置好vue.config.js后，需要重启服务npm run serve
- 配置
devServer - Type:
Object
一：devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：
module.exports = {
// ...
devServer: {
port: 2105, // 本地服务访问的端口号，http://localhost:2105/
open: false, // 告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。
// proxy 可以是一个指向开发环境 API 服务器的字符串
// 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:2105/
proxy: 'https://stg.sznai.com'
},
}
二：如果你想要更多的代理控制行为，也可以使用一个path: options成对的对象:
// 路径中有 /api 的请求都会走代理
// 例如： axios.get('/api/user') => 实际请求地址是 https://stg.sznai.com/api/user
// 本地请求 Request URL: http://192.168.1.104:2105/api/user 就会被自动转发到 https://stg.sznai.com/api/user
module.exports = {
// ...
devServer: {
port: 2105, // 本地服务访问的端口号，http://localhost:2105/
open: false, // 告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。
// 配置代理
proxy: {
'/api': {
target: 'https://stg.sznai.com',
ws: true, // 是否启用 websockets
changeOrigin: true // 主机头的起源保持默认进行代理时，可以设置changeOrigin以true覆盖此行为。
},
'/foo': {
target: 'https://www.baidu.com'
}
}
},
}
