跟大佬的视频使用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

  1. var jsonServer = require ('json-server')
  2.  
  3. var apiServer = jsonServer.create()
  4. var apiRouter = jsonServer.router('db.json')
  5. var middlewares = jsonServer.defaults()
  6.  
  7. apiServer.use(middlewares)
  8. apiServer.use(apiRouter)
  9. apiServer.listen(3000,function(){
  10. console.log('JSON Server is running')
  11. })

2.db.json文件放置在webpack.dev.conf.js的同级目录下,db.json的内容具体如下

  1. {
  2. "getNewsList": [
  3. {
  4. "id": 1,
  5. "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
  6. "url": "http://starcraft.com"
  7. },
  8. {
  9. "id": 2,
  10. "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
  11. "url": "http://warcraft.com"
  12. },
  13. {
  14. "id": 3,
  15. "title": "新闻条3新闻条3新闻条3",
  16. "url": "http://overwatch.com"
  17. },
  18. {
  19. "id": 4,
  20. "title": "新闻条4广告发布",
  21. "url": "http://hearstone.com"
  22. }
  23. ],
  24. "login": {
  25. "username": "yudongdong",
  26. "userId": 123123
  27. },
  28. "getPrice": {
  29. "amount": 678
  30. },
  31. "createOrder": {
  32. "orderId": "6djk979"
  33. },
  34. "getOrderList": {
  35. "list": [
  36. {
  37. "orderId": "ddj123",
  38. "product": "数据统计",
  39. "version": "高级版",
  40. "period": "1年",
  41. "buyNum": 2,
  42. "date": "2016-10-10",
  43. "amount": "500元"
  44. },
  45. {
  46. "orderId": "yuj583",
  47. "product": "流量分析",
  48. "version": "户外版",
  49. "period": "3个月",
  50. "buyNum": 1,
  51. "date": "2016-5-2",
  52. "amount": "2200元"
  53. },
  54. {
  55. "orderId": "pmd201",
  56. "product": "广告发布",
  57. "version": "商铺版",
  58. "period": "3年",
  59. "buyNum": 12,
  60. "date": "2016-8-3",
  61. "amount": "7890元"
  62. }
  63. ]
  64. }
  65. }

3.运行后,未识别到Json中的数据 NO resources found

问题解决:文件路径问题,js相对路径写法 "../"表示上一级目录开始 ,“./”表示同一级目录开始  “/” 表示根目录开始

json-server获取的接口信息

4.使用服务器端的代理,访问数据

cnpm install vue-resource --save   安装Vue-resource,在main.js中进行注册

在需要获取数据的组件 export default中添加以下代码

  1. export default{
  2. created: function(){
  3. this.$http.get('api/getNewsList')
  4. .then(function(data){
  5. console.log(data)
  6. },function (err){
  7. console.log(err)
  8. })
  9. }

因添加了api路径 在config/index.js添加如下代码,代表着api路径直接替换3000端口

  1. proxyTable: {
  2. '/api/':'http://127.0.0.1:3000'
  3. }

5.更改

  1. apiServer.use('/api', apiRouter)

Json-server在Vue 2.0中使用--build文件中没有dev-server文件的更多相关文章

  1. MyEclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别

    感谢大佬:https://blog.csdn.net/shan9liang/article/details/17266519 问题起源: 今天再在ESB调用WebService测试,需要在jboss上 ...

  2. vue 2.0以上怎么在手机中运行自己的项目

    第一步 打开vue项目 第二步 打开项目config/index.js文件,然后找到 module.exports 配置里面的 dev 配置,修改字段host:0.0.0.0 第三步 打开cmd输入i ...

  3. Eclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别(转)

    在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境  Compiler是编译时环境  假设,你的代码用到泛型,Bu ...

  4. 🎉 Element UI for Vue 3.0 来了!

    第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...

  5. vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...

  6. vue-cli脚手架build目录中的webpack.base.conf.js配置文件

    转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html webpack.base.conf.js配置文件// 引入nodejs路径模块 var path = ...

  7. build.gradle中的dependencies

    demo_myna中的build.gradle中的dependencies是依赖项目.比如之前开发的一个项目A,现在新的项目B要使用项目A的功能,那么把项目A作为类库关联进来,这样b就能直接使用A的功 ...

  8. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  9. 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标。确保已运行还原,且“netcoreapp2.0”已包含在项目的 TargetFrameworks 中。

    升级 vs201715.6.3之后发布出现 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标.确保已运行还原,且 ...

随机推荐

  1. Docker容器时间与主机时间相差8小时

    查看主机时间 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间 root@b43340ecf5ef:/# date Wed ...

  2. kafka入门学习---1 启动kakfa

    1.查看kafka生产者产生的数据 kafka-console-consumer.sh --zookeeper hadoop-:,hadoop-:,hadoop-: -topic kafkademo ...

  3. selenium 2019 笔记

    1.get打开本地目录的方法

  4. LVS系列三、LVS集群-IP-TUN模式

    一.LVS-IP TUN集群概述 DR方式是通过MAC,规模是一个交换网络.而TUN方式,是通过给数据包加上新的IP头部来实现,这个可以跨整个广域网.TUN模式可以解决DR模式下不能跨网段的问题,甚至 ...

  5. vue项目报错

    在项目根目录下的.eslintrc.js中的rules下添加以下内容: /*代表不用eslint检测代码规范*/ "useEslint":false, /* tab和空格混用缩进, ...

  6. Spring-Kafka —— 消费重试机制实现

    消息处理问题 在从Kafka主题接收消息之后立即处理消息的消费者的实现非常简单.不幸的是,现实要复杂得多,并且由于各种原因,消息处理可能会失败.其中一些原因是永久性问题,例如数据库约束失败或消息格式无 ...

  7. 异步模型 requestAnimationFrame

    异步模型 requestAnimationFrame 前言 window.requestAnimationFrame() 告诉浏览器--你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函 ...

  8. python基础知识(函数2)

    返回值 return return[value]  多个值用,逗号分开,没有返回值,会返回none值,函数不给指定返回值也会返回none值 def functionname(p1,p2,p3): re ...

  9. hive配置元数据库mysql文件配置

    hive中conf/hive-site.xml文件配置(没有该文件则新建) <?xml version="1.0"?> <?xml-stylesheet type ...

  10. MySQL知识篇-nmon监控

    说明1:监控MySQL服务器资源不止一种方式,这种nmon监控图形化.历史记录查询笔记方便,便于MySQL优化后,对比其效率不同,资源利用率不同. 说明2:摘抄自https://www.cnblogs ...