vue.js怎么加載本地json文件

這篇文章給大家分享的是有關vue.js怎么加載本地json文件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

在項目開發的過程中，因為無法和后臺的數據做交互，所以我們可以自建一個假數據文件(如data.json)到項目文件夾中，這樣我們就可以模仿后臺的數據進行開發。但是，如何在一個vue.js 項目中引入本地的json文件呢，下面就將步驟貼出來。(此時項目是由webpack打包而成)。

整個項目是由webpack打包而成。具體項目結構如下：

1：打包好的文件在此，http://pan.baidu.com/s/1dFCAzux

2：我們找到bulid>dev-server.js,然后打開

3：在里面加入這段代碼，大概在17行）。

var app = express() //從這后面開始加

var appData = require('../data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

 

var apiRoutes = express.Router();

 

apiRoutes.get('/seller',function (req,res) {

 res.json({

  errno:0,

  data:seller

 });

});

 

apiRoutes.get('/goods',function (req,res) {

 res.json({

  errno:0,

  data:goods

 });

});

 

apiRoutes.get('/ratings',function (req,res) {

 res.json({

  errno:0,

  datta:ratings

 });

});

app.use('/api',apiRoutes);

4：使用方法：

你可以在瀏覽器地址欄填寫http://localhost:8080/api/seller  或者http://localhost:8080/api/goods  或者http://localhost:8080/api/ratings   查看數據

因為加載的json數據沒有格式，看起來很亂，所以我們可以使用谷歌的擴展程序JSONView。

貼上讀取數據的頁面

感謝各位的閱讀！關于“vue.js怎么加載本地json文件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！