解決vue+webpack專案介面跨域出現的問題
阿新 • • 發佈:2020-08-11
1、config資料夾下index.js檔案設定proxyTable(proxyTable後面的host可以設定也可以保持預設的localhost)
proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server',// 開發環境 // target: 'http://10.xx.xx.xx:8080/renter-server',// 生產環境介面 changeOrigin: true,pathRewrite: { '^/api': '/' } } },host: '自己的IP或者預設的localhost',// can be overwritten by process.env.HOST
在使用axios請求的時候把所有介面的'http://10.xx.xx.xx:8080/renter-server'部分替換為'/api'
例如我們專案裡axios的配置資料夾(自定義的)api下面的index.js檔案裡有如下配置
let env = process.env.NODE_ENV let BASE_1,BASE_2 if (env === 'production') {// 生產環境 正式打包使用 BASE_1 = BASE_2 = CONFIG.apiHost } else if (env === 'development') {// 開發環境 本地測試使用 BASE_1 = BASE_2 = '/api' }
再用BASE1拼接進行請求
axios.get(BASE_1 + '/pc/getHouseList',{params: params})
補充知識:vue打包後404,webpack配置問題
首先宣告這是基於vue2.x的
1.
將其中build的配置項assetsPublicPath進行修改,改為上圖--》目的是將資原始檔的引入路徑,改為相對地址(相對index.html)
2.html中的js、css、img引入均沒有問題,
但是css中的background-image還是報404
此時的問題原因是,使用了相對地址後,在css進行引入的圖片路徑,其相對的是css檔案的路徑
此時的修改方法是,修改build資料夾中的utils.js檔案,增加一行程式碼搞定
以上這篇解決vue+webpack專案介面跨域出現的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。