前端环境部署如何配置后端接口地址【超级详细的方法步骤】

后台访问地址

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

本地开发访问：

本地开发是开发环境，因为本地启动项目，开发环境可以通过接口代理的方式解决跨域相关问题，所以我们配置访问地址的时候会比较简单。

前端为了统一处理接口访问，会设置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 通过代理变成 /