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

目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、興和網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

整個項目是由webpack打包而成。具體項目結(jié)構(gòu)如下：

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   查看數(shù)據(jù)

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

貼上讀取數(shù)據(jù)的頁面

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