前端环境部署如何配置后端接口地址[详细教程]

后台访问地址
前端访问后台地址其实是需要区分本地开发和服务器部署。

本地开发访问：
本地开发是开发环境，因为本地启动项目，开发环境可以通过接口代理的方式解决跨域相关问题，所以我们配置访问地址的时候会比较简单。
前端为了统一处理接口访问，会设置baseUrl，这里的bms是应用地址前缀。
// 路径地址：src/services/baseUrl.js

// eslint-disable-next-line import/no-mutable-exports
let baseUrl = ‘/api/bms’;

export default baseUrl;
复制代码
代理配置文件
// 路径地址： config/config.js

proxy: {
‘/api/bms’: {
target: ‘http://xxxxx:8000/’,
changeOrigin: true,
pathRewrite: { ‘^/api/bms’: ‘/’ },
},
},
复制代码
这里的**/api/bms对应的是baseUrl.js的baseUrl。访问地址的时候：接口访问的是 /api/bms/interface*。通过代理会变成 http://xxxxx:8000/interface 这里可能会问，api/bms去哪里了。因为这行代码：
pathRewrite: { ‘^/api/bms’: ‘/’ },
复制代码
会将 /api/bms 通过代理变成 /