前端環境部署如何配置后端接口地址【超級詳細的方法步驟】

后台訪問地址

前端訪問后台地址其實是需要區分本地開發和服務器部署。

本地開發訪問：

本地開發是開發環境，因為本地啟動項目，開發環境可以通過接口代理的方式解決跨域相關問題，所以我們配置訪問地址的時候會比較簡單。

前端為了統一處理接口訪問，會設置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 通過代理變成 /