vue.js學習筆記:如何加載本地json文件

2019-11-19 17:54:16

字體：大中小

來源：轉載

供稿：網友

在項目開發的過程中，因為無法和后臺的數據做交互，所以我們可以自建一個假數據文件(如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。

貼上讀取數據的頁面