在項目開發的時候，接口聯調的時候一般都是同域名下，且不存在跨域的情況下進行接口聯調，但是當我們現在使用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:8080host: 'localhost', // can be overwritten by process.env.HOST

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

?

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

轉載于:https://www.cnblogs.com/softwarefang/p/9361059.html

總結

以上是生活随笔為你收集整理的webpack+vue-cli 中proxyTable配置接口地址代理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。