前面有說到沒有后台數據,需要自己模擬后台數據,要進行一些配置 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地址訪問了,達到真機測試的目的。
注:能夠使用的條件是手機與服務器在同一個局域網
