寫(xiě)在前面

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、伊吾ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的伊吾網(wǎng)站制作公司

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í)在太爛了，多余的廢話(huà)就不說(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è)?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í)以此便利萌新以及也在踩坑的小伙伴。希望能幫到大家。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱(chēng)：vue-cli3.x配置跨域代理的實(shí)現(xiàn)方法
鏈接分享：http://m.rwnh.cn/article10/jijhgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站策劃、小程序開(kāi)發(fā)、服務(wù)器托管、虛擬主機(jī)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)