說明:
最近在搭建一個前端使用vue-element-admin，后端使用springBoot的項目。
由於vue-element-admin使用的是mock的模擬數據跑起來的項目,所以在開發過程中難免會遇到mock和真實數據之間的混合使用,既要原先的項目跑起來,也要真實接口數據可以使用
解決方案:
在github上vue-element-admin有issues這個就方便多了,我想上面肯定有人也遇到我這種問題,就直接在上面搜索問題,結果還真有,下,我貼一段上面的大佬對於這個問題的描述:
mock-server就是一個web server，默認監聽在9528端口（可能是vue-cli-service反代理把請求轉發給mock-server的），並沒有改寫xhr對象的請求方法，因此不會對請求作攔截。可以幫它當做一個單獨的web server，只不過它會隨着vue-cli-service啟動。
假定你的環境變量VUE_APP_BASE_API的值是http://foo.bar.com/api，如果是默認的mock數據的話，那么mock-server生成的資源會是這樣的格式http://localhost:9528/http://foo.bar.com/api/vue-admin-template/user/login。參考mock-server.js
以上說到，mock-server不會攔截請求，實際的請求還是會發給http://foo.bar.com/api/vue-admin-template/user/login，因此是不能通過mock-server實現這個需求的。
PS：當VUE_APP_BASE_API是/dev-api這樣不包含協議和主機名的值時，請求發給同域的web server了，即http://localhost:9528，剛好是mock-server的服務。
要實現同時使用mock和真實api，有兩種方案：
- 多個server，參考：vue從mock數據過渡到使用后台接口 https://www.cnblogs.com/xiayuscc/p/11063590.html
真實的api也可以當做一個mock server，通過配置proxy規則來實現 - 啟用純前端mock
修改xhr對象，攔截請求。符合mock規則的請求直接走mock
兩個方法我都實驗了一下,原理上都可行,問題在於什么時候走真實數據,什么時候走mock數據,第一個方法:他采用的是辨別mock接口的url,我好像怎么用都不行,最后結果是mock和接口都調不通了,不知道哪里出的問題,第二個方法:啟用純前端的mock,然后我就去了vue-element-admin的官方文檔上研究了一下,感覺和方法一差不多,一樣的結果.mock和接口都跑不了,
后來沒辦法,瘋狂百度看各路大佬的解決方案,出奇的一致百分之90都是百度到這種方法,剩下百分之10什么妖魔鬼怪都出來了0.0
最后總結沒辦法一點一點嘗試,發現是before屬性和after屬性搞的鬼,我最后的方案是采用的before,在默認情況下使用before調用mock數據,如果找不到數據時跑接口數據代碼如下(打雙引號的都是前人大佬的方法,弟弟跑不通,索性留着以后還可以再研究0.0)
devServer: {
port: port, // 訪問端口號
open: true, // 編譯完成打開網頁
host: '0.0.0.0', // 指定使用地址，默認localhost,0.0.0.0代表可以被外界訪問
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js'),
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API + '/user/login']: {
// target: `http://localhost:${port}/`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// },
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:${port}/mock`,
target: 'http://192.168.1.117:9090/',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
// after: require('./mock/mock-server.js')
// before: require('./mock/mock-server.js')
},
總結下來就是vue配置真難!!!!
願所有前端的頭發都被善待