vue小項目總結與筆記【十】——vue項目的前后端聯調及真機測試


 

前面有說到沒有后台數據,需要自己模擬后台數據,要進行一些配置 vue小項目總結與筆記【六】——使用axios發送ajax請求 

假設有了后台數據(還是沒有,我用自己的電腦開啟php服務器,繼續模擬了一下),我們需要把之前的配置改過來(config/index.js)

 

之前(請求到本地某文件夾static/mock):

proxyTable: { '/api': { // 請求api目錄的時候,轉發到'http://localhost:8080
        target: 'http://localhost:8080', // 路徑替換 api => /static/mock/
 pathRewrite: { '^/api': '/static/mock/' } } } //請求地址以api開頭,就請求到本地的mock目錄

 

現在(請求到后台服務器):

 

 proxyTable: { '/api': { // 請求api目錄時,轉到localhost的服務器上
        target: 'http://localhost:80', } },    

 

實現前后端聯調。

 

如果要請求另一台服務器上的內容(不是本機),就需要在package.json里面改變設置(添加紅色部分):

"scripts": { "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" },

使得項目能夠通過ip地址被訪問,這時候在 proxyTable 里就可以設置為:

 proxyTable: { '/api': { // 請求api目錄時,轉到ip地址為 192.168.x.xxx 的服務器上
        target: 'http://192.168.x.xxx:80', } }, 

 

(windows系統查詢本機ip地址:在cmd命令行執行:ipconfig 回車)

設置完成后,要重啟項目  npm run start ,之后就可以用手機通過ip地址訪問了,達到真機測試的目的。

注:能夠使用的條件是手機與服務器在同一個局域網

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM