摘要:需求上是我們只需要在開發環境配置跨域代理,所以我們可以在開發環境的配置上加上能夠代理上的環境變量即可。修改的配置將改為這里依然是采用的來做的代理配置,一些自定義配置可以移步到官網去進行參考。
寫在前面
vue-cli 3.x 的beta版本已經發布了一段時間,很早就像體驗一番一直找不到時間。這些日子剛好有空就想著依照網上的一些例子練下手,剛一上手就踩到坑了。
3.x 版本對整個項目的構建都有很大的改動,項目的默認配置整個都轉移到CLI service里去了,從而所有的配置文件在初始化的項目中并沒有生成。初次生成項目的時候可謂是完全懵的,無論是baidu還是google,對于3.x的介紹幾乎就沒有,僅有的一些也只是項目的一些生成流程,那怎么辦,只能靠自己瞎整了。
既然沒有現成的(作為一個伸手黨我還是很自覺的承認了),那就只能去扒官方文檔了,慢慢啃。這可就苦了我這個英語戰斗力只有5的渣了,憑借著百度翻譯和谷歌翻譯,然后夾雜著自己的一些猜想,好歹是把基本的給整明白了一點點。
由于文筆實在太爛了,多余的廢話就不說了,直接上干貨。
跨域代理配置由于3.x的默認配置都轉移到了CLI service里,所以生成的項目中并沒有配置項,我們如果需要自定義一些項目配置,則需要自己在項目的根目錄(root)創建一個vue.config.js。vue.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來做的代理配置,一些自定義配置可以移步到官網去進行參考。
后記第一次寫文檔,之前都是伸手養成了懶得習慣,現在因沒有可伸手的,就自己擼了,同時以此便利萌新以及也在踩坑的小伙伴。希望能幫到大家。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94408.html
摘要:我們將引入我們配置的中,再將修改如下路徑你們改下將印射為接口域名如果是接口,需要配置這個參數是否跨域需要的之后不管是生產環境,還是開發環境,都不用再修改我們的請求地址了。 前言 我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了,通常我們的請求地址是以localhost:8080來請求接口數據的,localhost是沒有辦法設置cookie的。 我們可以...
摘要:由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽,設置其,回調函數在中設置在頁面中,返回的作為參數傳入回調函數中,我們通過回調函數來來操作數據。 什么是跨域? 同源策略規定了如果兩個 url 的協議、域名、端口中有任何一個不等,就認定它們跨源了。 跨域的解決方式有哪幾種? 1.JSONP 是 JSON with ...
摘要:由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。動態創建標簽,設置其,回調函數在中設置在頁面中,返回的作為參數傳入回調函數中,我們通過回調函數來來操作數據。 什么是跨域? 同源策略規定了如果兩個 url 的協議、域名、端口中有任何一個不等,就認定它們跨源了。 跨域的解決方式有哪幾種? 1.JSONP 是 JSON with ...
摘要:有兩種方法,一種是在開發環境中設置通過的,另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了,打包后訪問也不用手動去除統一管理在項目開發過程中,會涉及到很多接口的處理,當項目足夠大時,就需要統一管理接口。 這篇文章總結了vue項目的所遇到的問題,包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理,性能優化等內容。 項目github地址 : 前端 https:...
閱讀 3098·2023-04-26 01:58
閱讀 951·2021-11-24 09:38
閱讀 3285·2021-09-03 10:29
閱讀 713·2021-08-21 14:10
閱讀 1488·2019-08-30 15:44
閱讀 3085·2019-08-30 14:10
閱讀 3211·2019-08-29 16:32
閱讀 1476·2019-08-29 12:48