vue-cli3 跨域配置


跨域代理配置

由於3.x的默認配置都轉移到了CLI service里,所以生成的項目中並沒有配置項,我們如果需要自定義一些項目配置,則需要自己在項目的根目錄(root)創建一個vue.config.jsvue.config.js里的配置項所有都是可選的,這就避免了我們去看一大堆不必要的默認配置,只需要配置自己需要的部分就行了。【官方文檔


由於baseUrl也是關聯的部署目錄,我們需求的僅僅是開發環境的變量,所以盡可能的我們不動baseUrl這個變量以免部署的時候出現問題。所以這里配置稍作修改。

需求上是我們只需要在開發環境配置跨域代理,所以我們可以在開發環境的配置上加上能夠代理上的環境變量即可。官方提供了環境變量的配置方案。

在項目的根目錄,我們創建一個.env.development文件來做開發環境的變量設置。

我們在.env.development文件下設置變量VUE_APP_BASE_API=/api即可將devServer的proxy重寫的url賦值給VUE_APP_BASE_API,我們僅需在axios的封裝方案上使用VUE_APP_BASE_API這個變量,就可以對應上devServer設置的變量。

// vue.config.js module.exports = { // 修改的配置 // 將baseUrl: '/api',改為baseUrl: '/', baseUrl: '/', devServer: { proxy: { '/api': { target: 'http://www.example.org', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } } } // .env.development VUE_APP_BASE_API=/api

這里依然是采用的http-proxy-middleware來做的代理配置,一些自定義配置可以移步到官網去進行參考。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM