跟大佬的视频使用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)
原文地址:https://www.cnblogs.com/gsdoublel/p/10190423.html
时间: 2024-10-09 07:00:09