成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-cli 3.x配置跨域代理

weakish / 607人閱讀

摘要：需求上是我們只需要在開(kāi)發(fā)環(huán)境配置跨域代理，所以我們可以在開(kāi)發(fā)環(huán)境的配置上加上能夠代理上的環(huán)境變量即可。修改的配置將改為這里依然是采用的來(lái)做的代理配置，一些自定義配置可以移步到官網(wǎng)去進(jìn)行參考。

寫(xiě)在前面

vue-cli 3.x 的beta版本已經(jīng)發(fā)布了一段時(shí)間，很早就像體驗(yàn)一番一直找不到時(shí)間。這些日子剛好有空就想著依照網(wǎng)上的一些例子練下手，剛一上手就踩到坑了。
3.x 版本對(duì)整個(gè)項(xiàng)目的構(gòu)建都有很大的改動(dòng)，項(xiàng)目的默認(rèn)配置整個(gè)都轉(zhuǎn)移到CLI service里去了，從而所有的配置文件在初始化的項(xiàng)目中并沒(méi)有生成。初次生成項(xiàng)目的時(shí)候可謂是完全懵的，無(wú)論是baidu還是google，對(duì)于3.x的介紹幾乎就沒(méi)有，僅有的一些也只是項(xiàng)目的一些生成流程，那怎么辦，只能靠自己瞎整了。
既然沒(méi)有現(xiàn)成的（作為一個(gè)伸手黨我還是很自覺(jué)的承認(rèn)了），那就只能去扒官方文檔了，慢慢啃。這可就苦了我這個(gè)英語(yǔ)戰(zhàn)斗力只有5的渣了，憑借著百度翻譯和谷歌翻譯，然后夾雜著自己的一些猜想，好歹是把基本的給整明白了一點(diǎn)點(diǎn)。

由于文筆實(shí)在太爛了，多余的廢話就不說(shuō)了，直接上干貨。

跨域代理配置

由于3.x的默認(rèn)配置都轉(zhuǎn)移到了CLI service里，所以生成的項(xiàng)目中并沒(méi)有配置項(xiàng)，我們?nèi)绻枰远x一些項(xiàng)目配置，則需要自己在項(xiàng)目的根目錄(root)創(chuàng)建一個(gè)vue.config.js。vue.config.js里的配置項(xiàng)所有都是可選的，這就避免了我們?nèi)タ匆淮蠖巡槐匾哪J(rèn)配置，只需要配置自己需要的部分就行了。【官方文檔】

由于baseUrl也是關(guān)聯(lián)的部署目錄，我們需求的僅僅是開(kāi)發(fā)環(huán)境的變量，所以盡可能的我們不動(dòng)baseUrl這個(gè)變量以免部署的時(shí)候出現(xiàn)問(wèn)題。所以這里配置稍作修改。

需求上是我們只需要在開(kāi)發(fā)環(huán)境配置跨域代理，所以我們可以在開(kāi)發(fā)環(huán)境的配置上加上能夠代理上的環(huán)境變量即可。官方提供了環(huán)境變量的配置方案。

在項(xiàng)目的根目錄，我們創(chuàng)建一個(gè).env.development文件來(lái)做開(kāi)發(fā)環(huán)境的變量設(shè)置。

我們?cè)?b>.env.development文件下設(shè)置變量VUE_APP_BASE_API=/api即可將devServer的proxy重寫(xiě)的url賦值給VUE_APP_BASE_API，我們僅需在axios的封裝方案上使用VUE_APP_BASE_API這個(gè)變量，就可以對(duì)應(yīng)上devServer設(shè)置的變量。

// 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來(lái)做的代理配置，一些自定義配置可以移步到官網(wǎng)去進(jìn)行參考。

后記

第一次寫(xiě)文檔，之前都是伸手養(yǎng)成了懶得習(xí)慣，現(xiàn)在因沒(méi)有可伸手的，就自己擼了，同時(shí)以此便利萌新以及也在踩坑的小伙伴。希望能幫到大家。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94408.html

相關(guān)文章

  • vue-cli本地環(huán)境API代理設(shè)置和解決跨域

    摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個(gè)參數(shù)是否跨域需要的之后不管是生產(chǎn)環(huán)境，還是開(kāi)發(fā)環(huán)境，都不用再修改我們的請(qǐng)求地址了。 前言 我們?cè)谑褂胿ue-cli啟動(dòng)項(xiàng)目的時(shí)候npm run dev便可以啟動(dòng)我們的項(xiàng)目了，通常我們的請(qǐng)求地址是以localhost:8080來(lái)請(qǐng)求接口數(shù)據(jù)的，localhost是沒(méi)有辦法設(shè)置cookie的。 我們可以...

    lakeside 評(píng)論0 收藏0

  • vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁(yè)面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過(guò)回調(diào)函數(shù)來(lái)來(lái)操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    lidashuang 評(píng)論0 收藏0

  • vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)。回調(diào)函數(shù)的名字一般是在請(qǐng)求中指定的。動(dòng)態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁(yè)面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過(guò)回調(diào)函數(shù)來(lái)來(lái)操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個(gè) url 的協(xié)議、域名、端口中有任何一個(gè)不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    張金寶 評(píng)論0 收藏0

  • vue開(kāi)發(fā)項(xiàng)目完全指南

    摘要：有兩種方法，一種是在開(kāi)發(fā)環(huán)境中設(shè)置通過(guò)的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問(wèn)接口就可以不加了，打包后訪問(wèn)也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項(xiàng)目的所遇到的問(wèn)題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項(xiàng)目github地址 : 前端 https:...

    leoperfect 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<