vue.js学习笔记:如何加载本地json文件

在项目开发过程中，我们无法与后台数据进行交互，所以我们可以在项目文件夹中构建一个假的数据文件(比如data.json)，这样我们就可以模仿后台数据进行开发。但是，如何将本地json文件引入到vue.js项目中，下面的步骤将会公布。(此时，项目由webpack打包。).

整个项目由webpack打包。具体项目结构如下：

http://pan.baidu.com/s/1dFCAzux，这是打包好的文件

2:我们找到build dev-server . js并打开它

3:把这段代码加进去，大概17行)。

var app=express()//Add varappdata=require('./data . JSON’)从后面看；var seller=appData.sellervar goods=appData.goodsvar ratings=appData.ratingsvar apiRoutes=express。路由器()；apiRoutes.get('/seller '，函数(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 '，ApiRoads)；4.用法：

您可以在浏览器地址栏中填写http://localhost :8080/API/卖家或http://localhost 33608080/API/商品或http://localhost 33608080/API/评级查看数据

因为加载的json数据没有格式，看起来很乱，所以我们可以使用谷歌的扩展JSONView。

粘贴页面以读取数据

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。