Vue CLI3是一款非常流行的Vue.js項目腳手架,它提供了許多便捷的功能,讓我們能夠快速地啟動和開發我們的Vue項目。在開發Vue項目的過程中,有時候需要進行跨域請求或者是代理請求,這時候我們就需要配置Vue CLI3的代理來實現。
Vue CLI3的代理配置非常簡單。我們只需要在vue.config.js文件中,添加下面的代碼即可:
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '/' } } } } }
上述代碼的含義是,在本地的開發環境中,代理所有以/api開頭的請求到http://localhost:3000。例如,我們在項目中使用axios發送了一個請求,請求的URL為http://localhost:8080/api/user,則代理的URL就是http://localhost:3000/user。
通過以上的配置,我們就可以成功地實現代理請求了。在開發時,我們可以使用mock數據模擬服務端的數據,在打包部署時,我們可以將代理請求切換為真實的服務端地址。