vue開發(fā)前后端分離前端如何調(diào)用后端接口？

1.你說的在不同的環(huán)境下請求不同的api是對的
2.一般來說不管開發(fā)環(huán)境還是測試環(huán)境還是線上環(huán)境，url的路徑都是一個，只是前綴不同，這個前綴可以根據(jù)打包環(huán)境的變化來自適應(yīng)
3.你現(xiàn)在的開發(fā)環(huán)境的mock是mock了json，可以在dev-server里啟動mock服務(wù)器，mock請求

axios可以解決你的問題
開發(fā)和生產(chǎn)階段配置不同的接口就行了

不對啊，你本地mock數(shù)據(jù)的時候，注意要弄成http的形式啊，本地webpack最好是是用express的中間件方式進行dev開發(fā)，這樣，你就可以寫express的接口了，寫個假的數(shù)據(jù)接口，你本地直接請求這個接口就好了，像你那樣直接請求本地文件是不對的，那變成file協(xié)議了。
還有，你注意你需要指定個baseUrl，全局請求從一個地方引入這個baseUrl，這樣，改一個地方就OK了。

你可以在config文件夾中的index.js中設(shè)置代理服務(wù)器，然后在ajax的時候，寫上/xxx/xx（那個文件夾中的哪個接口路徑就行了）

你應(yīng)該先了解一下 axios

你測試地址http://localhost:8181/abc/userdata.php說明你本機就有接口，那你是否清楚get("../static/userdata.json")是為了什么？？？
代碼里面不用改，config目錄里面dev.env.js和prod.env.js分別定義后端接口根域名即可

先定義接口文檔, 如

eg.
請求JSON:

{
    "name": "wanghaiyang",
    "type": 1
}

響應(yīng)JSON:

{
    "ret": 200,
    "msg": "success",
    "userList": [
        {
              "username": "wanghaiyang",
              "id": "12345676543"
        }
        ...
    ],
    "total": 1000
}

如果部署在同一臺服務(wù)器, 前端文件放在 Web服務(wù)器根目錄, 直接 get(/api/users) 接口就應(yīng)該返回對應(yīng)的 json 數(shù)據(jù), 跟后臺配置相關(guān), 不管你 php 文件放在何處

如果是后端要你 根據(jù)文件夾訪問。那你想改動不大的話 盡量還是和后端保持一致。
但問題是，看起來 你本地的json 只是你想mock一下數(shù)據(jù)？

經(jīng)過仔細琢磨終于搞清楚是怎么弄的了，記錄在這里以備不時之需，如果有什么錯誤希望大家指正。

現(xiàn)在假設(shè)項目后端接口地址：192.168.0.15/abc/data.php，打開config/index.js，設(shè)置proxyTable屬性：

    proxyTable: {
      '/abc': {
        target: 'http://192.168.0.15', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置這個參數(shù)
        changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置
        pathRewrite: {
          '^/abc': '/abc'
        }
      }
    }

注意，上面代碼中abc不是隨便起的名字，它和后端接口地址的文件夾要一致，這樣當(dāng)你打包的時候就不會出錯。

然后用axios引用接口：axios("/abc/data.php")。這樣在開發(fā)環(huán)境中就可以直接引用后端接口。npm run build打包后將dist里的文件復(fù)制到后端根目錄中，不需要更改任何代碼直接就可以調(diào)用后端abc/data.php接口。