跟大佬的视频使用json-server模拟后台数据调用,发现build文件中并没有dev-server.js。
新版的vue-cli取消了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以可以在webpack.dev.conf.js中配置本地访问
1.在webpack.dev.conf.js中任意位置添加以下配置 端口设置在3000
var jsonServer = require (‘json-server‘)var apiServer = jsonServer.create()var apiRouter = jsonServer.router(‘db.json‘)var middlewares = ?jsonServer.defaults()apiServer.use(middlewares)apiServer.use(apiRouter)apiServer.listen(3000,function(){ ?console.log(‘JSON Server is running‘)})
2.db.json文件放置在webpack.dev.conf.js的同级目录下,db.json的内容具体如下
{ ?"getNewsList": [ ???{ ?????"id": 1, ?????"title": "新闻条目1新闻条目1新闻条目1新闻条目1", ?????"url": "http://starcraft.com" ???}, ???{ ?????"id": 2, ?????"title": "新闻条目2新闻条目2新闻条目2新闻条目2", ?????"url": "http://warcraft.com" ???}, ???{ ?????"id": 3, ?????"title": "新闻条3新闻条3新闻条3", ?????"url": "http://overwatch.com" ???}, ???{ ?????"id": 4, ?????"title": "新闻条4广告发布", ?????"url": "http://hearstone.com" ???} ?], ?"login": { ???"username": "yudongdong", ???"userId": 123123 ?}, ?"getPrice": { ???"amount": 678 ?}, ?"createOrder": { ???"orderId": "6djk979" ?}, ?"getOrderList": { ???"list": [ ?????{ ???????"orderId": "ddj123", ???????"product": "数据统计", ???????"version": "高级版", ???????"period": "1年", ???????"buyNum": 2, ???????"date": "2016-10-10", ???????"amount": "500元" ?????}, ?????{ ???????"orderId": "yuj583", ???????"product": "流量分析", ???????"version": "户外版", ???????"period": "3个月", ???????"buyNum": 1, ???????"date": "2016-5-2", ???????"amount": "2200元" ?????}, ?????{ ???????"orderId": "pmd201", ???????"product": "广告发布", ???????"version": "商铺版", ???????"period": "3年", ???????"buyNum": 12, ???????"date": "2016-8-3", ???????"amount": "7890元" ?????} ???] ?}}
3.运行后,未识别到Json中的数据 NO resources found
问题解决:文件路径问题,js相对路径写法 "../"表示上一级目录开始 ,“./”表示同一级目录开始 “/” 表示根目录开始
json-server获取的接口信息
4.使用服务器端的代理,访问数据
cnpm install vue-resource --save 安装Vue-resource,在main.js中进行注册
在需要获取数据的组件 export default中添加以下代码
export default{ ???????created: function(){ ???????????this.$http.get(‘api/getNewsList‘) ???????????.then(function(data){ ???????????????console.log(data) ???????????},function (err){ ???????????????console.log(err) ???????????})}
因添加了api路径 在config/index.js添加如下代码,代表着api路径直接替换3000端口
proxyTable: { ?????‘/api/‘:‘http://127.0.0.1:3000‘ ???}
5.更改
apiServer.use(‘/api‘, apiRouter)
Json-server在Vue 2.0中使用--build文件中没有dev-server文件
原文地址:https://www.cnblogs.com/gsdoublel/p/10190423.html