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

时间: 2024-10-09 07:00:09

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

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

此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件,主要用来处理各种文件的配置 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码 // 引入nodejs路径模块 var path = require('path') // 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-st

vue.js2.0开发中的几个技巧

最近用Vue.js开发了几个项目,Vue的双向数据绑定和组件化让我耳目一新,减少了很多底层重复的工作,和基于jQuey的前端开发不起来,基于Vue的开发给我一种酣畅淋漓的感觉. 下面给出我基于Vue.js做的几个页面:爆料页面.520贵州.百姓关注抢红包. 当然,在开发的过程中,不可避免的遇到了一些问题和坑,在此记录这些问题,积累经验. 1.测试环境相对路径的问题 Vue.js 2.0可以基于wepack构建,如果需要打包生成最终输出代码,直接在DOS窗口中输入命令:npm run build,

SQL Server数据库mdf文件中了勒索病毒GANDCRAB V5.0.4

SQL,数据库,勒索病毒,mdf文件中毒,GANDCRAB V5.0.4 *SQL Server数据库mdf文件中了勒索病毒.mdf.GANDCRAB V5.0.4.GANDCRAB V5.0.4 SQL Server数据库mdf文件中了勒索病毒GANDCRAB V5.0.4.GANDCRAB V5.0.4SQL Server数据库mdf文件中了勒索病毒GANDCRAB V5.0.4.GANDCRAB V5.0.4常见的扩展名如下:GANDCRAB V5.0.4 ****-DECRYPT.txt

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

将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:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希

转-Vue.js2.0从入门到放弃---入门实例(一)

http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 2016-11-03 14:40 21431人阅读 评论(9) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 最 近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊, 由