本文阐述了用Vue加载json文件的方法。分享给大家参考，如下：

1.在build/dev-server.js文件中的代码var app=express()之后添加以下内容(旧版本):

var appData=require('./address . JSON ')；//导入address.json文件var apiRoutes=express。路由器()；apiRoutes.get('/address '，函数(req，res) { res.json({ errno:0，data : appdata })；});app.use('/api '，ApiRoads)；//访问地址为：/api/address。新代码如下：

在build/webpack.dev.conf.js文件中添加以下代码：

const express=require(' express ')const app=express()var appData=require('./address . JSON ')var APi routes=express。Router()app.use('/api '，ApiRoutes)//向devServer对象添加以下代码：Before(app){ app . get('/API/address '，(req，res)={res.json ({errno:0，data : appdata })})}

其次，然后重新运行npm开发

第三，此时在浏览器中输入http://localhost :8080/API/address即可看到json文件的数据。

在组件中，可以使用axios或其他方法请求数据，请求URL为：'/api/address '，例如，在axios中：

(1)、下载axios，如果没有

NPM安装-保存axiosvue-axios (2)，在main.js中介绍

从' axios' vue.prototype导入axios，$ http=axios (3)，开始请求

这个。$ http.get ('/API/address ')。然后(response={console.log(response)}，response={ console . log('数据加载失败')})PS:这里推荐几个相关的json在线工具供大家参考：

在线JSON代码检查，检查，美化和格式化工具：http://tools.jb51.net/code/json

JSON在线格式化工具：http://tools.jb51.net/code/jsonformat

在线XML/JSON相互转换工具：http://tools.jb51.net/code/xmljson

Json代码在线格式化/美化/压缩/编辑/转换工具：http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：http://tools.jb51.net/code/json_yasuo_trans

希望本文对vue.js程序的设计有所帮助。