跟大佬的视频使用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文件的更多相关文章

  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. 2.3 Go语言基础之数组

    本文主要介绍Go语言中数组(array)及它的基本使用. 一.Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化. 基 ...

  2. sqlserver创建链接服务器连接sqlserver脚本

    示例: EXEC sp_addlinkedserver @server='MyLinkServer', --链接服务器别名 @srvproduct='', @provider='SQLOLEDB', ...

  3. matlab将字符串转化为变量的方法

    1.将字符串转化为变量的方法,执行 eval(x) 2.将变量转化为字符串的方法,执行 char(a) 讲解 aa = 98 x = 'aa' 目标:通过x得到98,即x->aa->98, ...

  4. Centos7 - mysql 5.5.62 tar.gz 方式安装

    安装准备 Mariadb 去除 由于CentOS7自带的是 Mariadb, 所以先来删除他吧... 1. 查找版本 # rpm -qa|grep mariadb 执行命令后会出现类似 MariaDB ...

  5. vs把asp.net旧的项目名称全部修改

    1 先打开项目,把名称全部替换掉,然后把解决方案,程序集名称全部替换掉. 2 重新生成,清理,关闭项目. 3 把.sln文件用文本编辑器打开,替换里面的名称,然后把文件夹名称都修改好.d 4.打开项目 ...

  6. UML类图与时序图

    UML统一建模语言 结构式图形: 静态图(类图,对象图,包图) 实现图(组件图,部署图) 剖面图 复合结构图 行为式图形: 活动图 状态图 用例图 交互式图形: 通信图 交互概念图(2.0) 时序图( ...

  7. 【DSP开发】串行 RapidIO: 高性能嵌入式互连技术

    串行 RapidIO: 高性能嵌入式互连技术 作者: 德州仪器技术应用工程师 冯华亮/ Brighton Feng/ bf@ti.com 摘要 串行RapidIO针对高性能嵌入式系统芯片间和板间互连而 ...

  8. 如何在picture上显示透明Label

  9. android简易跑马灯

    重点:焦点的选择(返回true使得焦点不被选择) MarqueeText.java package com.example.demo02; import android.content.Context ...

  10. 移动端1px的边框

    我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每 ...