码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-12-28 18:29:52      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:user   require   res   color   1年   span   str   style   获取数据   

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

标签:user   require   res   color   1年   span   str   style   获取数据   

原文地址:https://www.cnblogs.com/gsdoublel/p/10190423.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!