在Vue應用開發中,我們經常需要訪問后端API接口來獲取數據,而使用axios來請求HTTP接口時,我們一般會配置baseUrl屬性來指定API的基礎URL。通常情況下,我們會將baseUrl設置為項目部署的服務器地址,以便在開發和生產環境下都可以正常請求API。但是,在實際開發過程中,要根據不同的環境來設置不同的baseUrl,這就需要我們去動態地修改baseUrl。
Vue.js提供了一種非常方便的方法來動態地修改請求和響應的配置。在Vue實例中,我們可以訪問axios的全局配置對象axios.defaults來修改baseUrl屬性。例如,當我們需要在開發環境中請求本地模擬的API接口時,可以在main.js文件中添加如下代碼:
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://localhost:3000/api'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'https://api.example.com'
}
上面的代碼根據NODE_ENV環境變量的值來動態地修改axios的baseUrl屬性。在開發環境中,我們將baseUrl設置為本地模擬API接口的訪問地址,而在生產環境中,我們將baseUrl設置為正式API接口的訪問地址。這樣,在不同的環境下,我們都可以順利地請求API接口了。