在專案開發的時候，介面聯調的時候一般都是同域名下，且不存在跨域的情況下進行介面聯調，但是當我們現在使用vue-cli進行專案打包的時候，我們在本地啟動伺服器後，比如本地開發服務下是 http://localhost:8080 這樣的訪問頁面，但是我們的介面地址是 http://xxxx.com/save/index 這樣的介面地址，我們這樣直接使用會存在跨域的請求，導致介面請求不成功，因此我們需要在打包的時候配置一下，我們進入 config/index.js 程式碼下如下配置即可：

dev: {

 // 靜態資原始檔夾
 assetsSubDirectory: 'static',// 釋出路徑
 assetsPublicPath: '/',// 代理配置表，在這裡可以配置特定的請求代理到對應的API介面
 // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
 // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
 proxyTable: {
  '/api': {
  target: 'http://xxxxxx.com',// 介面的域名
  // secure: false,// 如果是https介面，需要配置這個引數
  changeOrigin: true,// 如果介面跨域，需要進行這個引數配置
  pathRewrite: {
   '^/api': ''
  }
  }
 },// 本地訪問 http://localhost:8080
 host: 'localhost',// can be overwritten by process.env.HOST

介面地址原本是 /save/index，但是為了匹配代理地址，在前面加一個 /api,因此介面地址需要寫成這樣的即可生效 /api/save/index。

注意： '/api' 為匹配項，target 為被請求的地址，因為在 ajax 的 url 中加了字首 '/api'，而原本的介面是沒有這個字首的，所以需要通過 pathRewrite 來重寫地址，將字首 '/api' 轉為 '/'。如果本身的介面地址就有 '/api' 這種通用字首，就可以把 pathRewrite 刪掉。

補充知識：webpack -- 關於proxyTable的配置在開發環境和生產環境中的原理解析

前言

首先，proxyTable是我們在本地開發環境中除錯介面用的，目的是為了解決本地跨域的問題，因為本地地址為localhost:xxxx/xxx

在線上的生產環境是沒用的！！！

假設我們用的是vue-cli命令列工具生成的webpack專案模板，我們很容易能在config資料夾下面找到index.js檔案。

本地如何配置

假設我要請求的地址為

'http://xxx.com/scada/json/aa.tpl'

我們在index.js檔案中找到如下程式碼：我推薦了一種寫法，後面我會說為什麼

那麼我請求的那段程式碼就是這樣的

axios.get('/scada/json/aa.tpl').then((res) => {
 //........
})

稍微解釋一下其中的原理：當發請求的時候，proxy就會起作用，他會在介面'/scada'前面加上 ‘http://xxx.com:123',成為 ‘http://xxx.com:123/scada/json/aa.tpl' 由於我們配置中的 pathRewrite欄位需要將 '/scada'寫為 ‘/scada',所以請求介面還是 ‘http://xxx.com:123/scada/json/aa.tpl'

繼續向下看，乾貨還在後面

假設幾種其它的寫法

假設一

如果proxyTable配置是這樣的

proxyTable: {
 '/scada': {
 target: 'http://xxx.com:123',changeOrigin: true,pathRewrite: {
  '^/scada': '/'  
 }
 }

那麼我們的請求程式碼必須寫成這樣

axios.get('/scada/scada/json/aa.tpl').then((res) => {
 //........
 //是不是有點難受
})

假設二

如果proxyTable配置是這樣的，也就是重新起個名字

proxyTable: {
 '/api': {
 target: 'http://xxx.com:123',pathRewrite: {
  '^/api': '/'  
 }
 }

那麼我們的請求程式碼必須寫成這樣

axios.get('/api/scada/json/aa.tpl').then((res) => {
 //........
 //這種寫法還能接受，但是有個致命的缺點
})

再向下看，看看我推薦的寫法的真真優勢

打包上線的問題

這裡只說程式碼上線之後和介面在同源情況下，如果不同源則存在跨域，這裡先不考慮這種情況

假如我們把打包後的程式碼也部署到了 'http://xxx.com:123'上

上線後的程式碼為生產環境，沒有了proxy

那麼他是怎麼解析請求的呢？比如下面這個請求

axios.get('/scada/json/aa.tpl').then((res) => { //........

})

由於 '/'表示的是根目錄的意思，所以會解析為hostname + port + 請求的地址，即為 ‘http://xxx.com:123/scada/json/aa.tpl' ，沒有一點問題，介面肯定能請求到

那麼如果按照上面我說的假設一或者假設二的寫法呢？

是不是會解析為 ‘http://xxx.com:123/scada/scada/json/aa.tpl' 和 ‘http://xxx.com:123/api/scada/scada/json/aa.tpl'

所以，假設一和假設二需要在打包之前修改請求地址才能打包，增加了許多不必要的麻煩

以上這篇webpack+vue-cil 中proxyTable配置介面地址代理操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。