Json-server在Vue 2.0中使用--build文件中没有dev-server文件

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

时间: 12-28

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

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

在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境  Compiler是编译时环境  假设,你的代码用到泛型,Build Path环境为1.5,Compiler环境为1.4,那么会显示编译错误,无法编译:但是这样的web项目是可以在web容器中运行的,前提是你的容易支持1.5语法. Build Path里面是你的class文件的运行环境级别,非编译器需要使用到的,例如,如果用的1.4就不能使用泛型.而Compi

将Json数据保存在静态脚本文件中读取

一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo: 1.动态加载Json数据显示到前台 [HttpPost] public ActionResult GetData() { List<Area> areaList = new List<Area>() { new Area() { AreaID=1, AreaName="福建省", Depth=1, cityList=new List<

vue1.0 -vue 2.0

vue.js 发表于 2017-01-15   | vue基础 vue1.0 vue1.0对象的属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var vm = new Vue({ el:'#box', //容器 data:{ //数据 msg:"data", a:1 }, methods:{ //普通方法 }, computed:{ //计算属性(属性b随着其return

Vue.js2.0从入门到放弃---入门实例

最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希

JetBrains发布DataGrip 1.0——数据库与SQL领域中的瑞士军刀

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/12/datagrip-released 近日,来自捷克的软件公司JetBrains发布了全新的重量级产品DataGrip 1.0--号称数据库与SQL领域中的瑞士军刀.DataGrip的前身0xDBE已经发布一年多的时间了,这也是JetBrains向广大用户提供的开发版本,每个版本都有一定的使用期限,过期后用户可以从JetBrains网站上下载新的开发版本.经过了长时间的开

在 SQL Server 中查询EXCEL 表中的数据遇到的各种问题

原文:在 SQL Server 中查询EXCEL 表中的数据遇到的各种问题 SELECT * FROM OpenDataSource( 'Microsoft.Jet.OLEDB.4.0','Data Source="D:\KK.xls";User ID=Admin;Password=;Extended properties=Excel 5.0')...[Sheet1$] 问题: 消息 15281,级别 16,状态 1,第 1 行 SQL Server 阻止了对组件 'Ad Hoc Di

asp.net mvc 3.0 知识点整理 ----- (2).Controller中几种Action返回类型对比

通过学习,我们可以发现,在Controller中提供了很多不同的Action返回类型.那么具体他们是有什么作用呢?它们的用法和区别是什么呢?通过资料书上的介绍和网上资料的查询,这里就来给大家列举和大致的概括下. (1). ActionResult(base):最基本的Action类型,返回其他类型都可以写ActionResult. (2). ContentResult:返回ContentResult用户定义的内容类型. public ActionResult Content() { return

Vue.2.0.5-组件

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以通过以下方式创建一个 Vue 实例: new Vue({ el: '#some-element', // 选项 }) 要注册一个全局组件,你可以使用 Vue.component(tagName

新手入门指导:Vue 2.0 的建议学习顺序

起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础. 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解. 4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止.着

主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /************************************************************************************ * 命名空间:HR.Controllers * Controller: TreeController * 版本号: F 1.0.0.0 * 负责人: Markfan * 电子邮箱:[ema