run cal src 開啟 www. 不足 https album ons

我們在做一個項目時前期可能沒有後端提供接口模擬數據，那麽作為前端就需要自己寫json文件模擬數據加載。在Vue中只需要vue-resource（也可以使用axios，安裝方法和vue-resource一樣，具體使用方法可以去axios官網查看，在這裏我使用vue的插件vue-resource）和json-server互相配合就可以實現數據模擬了。

1.安裝vue-resource（Ajax請求）和json-server（mock數據）： npm install vue-resource --save --registry=https://registry.npm.taobao.org --verbose npm install json-server --save --registry=https://registry.npm.taobao.org --verbose 2.安裝成功後在main.js引入依賴vue-resource，此時在Vue裏就可以用$http進行Ajax請求了，查看具體使用方法。：

3.在build文件夾的dev-server.js文件進行服務配置，具體如下圖所示： 註意：(1).由於我們Vue開啟的本地服務是localhost:8080，所以mock數據監控的端口不能是8080，只要不沖突就可以，我這裏用的是localhost:8081，所以圖中第73行是port+1。 (2).圖中第68行的data.json就是我們的假數據文件，一般放在和index.html同級目錄下，若不同級則需要修改路徑。 (3).如果沒有用代理訪問，第72行的第一個參數直接寫接口名字就可以了，但一般我們會用代理訪問，所以這裏寫的是‘/api’，代理設置在下一步驟說明。 4.同時我們需要做一個代理表，這裏我用api，訪問這個代理就可以獲取到數據，在config文件夾的index.js文件進行代理配置，如下圖紅框所示：

data.json文件隨意寫了個，如下圖所示：

此時npm run dev重新開啟服務，輸入服務地址就可以看到已經成功mock數據：

6.接著就是在項目中用Ajax請求數據了，我們在之前安裝了vue-resource插件並且進行依賴註入，在項目中可以直接進行請求，如下圖所示： 在控制臺輸出的效果如下所示：



進一步console.log（res.body）輸出效果如下所示：

至此我們已經實現了在Vue項目mock數據模擬後臺請求，希望對大家有幫助。 如需轉載請註明出處：http://www.cnblogs.com/zishang91/p/7680569.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！

Vue如何mock數據模擬Ajax請求