vue-element-template模板vue-cli3本地使用proxy解決跨域問題

本文編輯於2020年6月1日

使用花老大的vue-element-template模板

不確定admin模板是否能正確使用此方法

此方法僅僅只能解決mock轉本地，未嘗試過mock+本地同步進行

---

 

dev

本地開發下主要是端口不同跨域問題

什么是跨域我就不再詳細解釋了

1.打開main.js

注釋掉mockXHR

 

 2.打開.env.development

修改api路徑（把里面的路徑刪掉）

# base api
VUE_APP_BASE_API = ''

 

 3.打開vue.config.js

在devServer下添加proxy

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:8080',    //這里就改成你的api路徑
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

 

注釋掉下面的mock-server

 

保存重新運行項目。 

如果修改了。需要重新運行，不會熱更新的！！！

重新運行之后查看Network會發現請求路徑變成localhost:9528無影響

 

 發現還是有問題的時候。麻煩看看utils/request.js

前端根據返回的code來判斷，所以根據自己的后台修改就行了

 

 

---

 

寶塔暫時不會配置，等會配置之后再弄。

在打包前，先把proxy代理的地址放在.env.production里面。

然后運行npm run build:prod，會生成一個dist文件夾，扔給后端就沒你事了。