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)
Json-server在Vue 2.0中使用--build文件中没有dev-server文件的更多相关文章
- MyEclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别
感谢大佬:https://blog.csdn.net/shan9liang/article/details/17266519 问题起源: 今天再在ESB调用WebService测试,需要在jboss上 ...
- vue 2.0以上怎么在手机中运行自己的项目
第一步 打开vue项目 第二步 打开项目config/index.js文件,然后找到 module.exports 配置里面的 dev 配置,修改字段host:0.0.0.0 第三步 打开cmd输入i ...
- Eclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别(转)
在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境 Compiler是编译时环境 假设,你的代码用到泛型,Bu ...
- 🎉 Element UI for Vue 3.0 来了!
第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...
- vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
转载自:http://www.cnblogs.com/ye-hcj/p/7082620.html webpack.base.conf.js配置文件// 引入nodejs路径模块 var path = ...
- build.gradle中的dependencies
demo_myna中的build.gradle中的dependencies是依赖项目.比如之前开发的一个项目A,现在新的项目B要使用项目A的功能,那么把项目A作为类库关联进来,这样b就能直接使用A的功 ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标。确保已运行还原,且“netcoreapp2.0”已包含在项目的 TargetFrameworks 中。
升级 vs201715.6.3之后发布出现 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标.确保已运行还原,且 ...
随机推荐
- linux(redhat)安装jdk1.8
第一步:下载Linux环境下的jdk1.8文件 我的Linux是32位的,因此我下载jdk-8u144-linux-i586.tar.gz文件. 下载链接地址:http://www.oracle.co ...
- SpringCloud(七)之SpringCloud的链路追踪组件Sleuth实战,以及 zipkin 的部署和使用
一.前言 Spring Cloud Sleuth 主要功能就是在分布式系统中提供追踪解决方案 ,并且兼容了zipkin,提供了REST API接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序 . ...
- Spring对象依赖关系
Spring中,如何给对象的属性赋值? [DI, 依赖注入] 1) 通过构造函数 2) 通过set方法给属性注入值 3) p名称空间 4)自动装配(了解) 5) 注解 package loade ...
- NLP - Log-linear Models
1.The Language Modeling Problem 现在抛开我们之前讲的马尔科夫模型的假设,对于一门语言的定义,肯定不能简单依赖于每个单词的前两个单词,这是常识.比如英语中 ...
- virtualbox迁移虚拟机
我用的Ubuntu16.04,下图为装好virtualbox时安装好系统后默认的存储位置. 促使我想迁移的原因是我的/home下因为虚拟机的存储原因导致/home下还剩1.5M可用空间..... 该目 ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(一) (转)
http://www.cnblogs.com/liqingwen/p/6640861.html 一步步打造一个简单的 MVC 电商网站 - BooksStore(一) 本系列的 GitHub地址:ht ...
- Vue 子组件与子组件之间传值
可以借用公共父元素.子组件A this.$emit("eventName", data) 触发事件,父组件监听事件,更改父组件 data , 通过Props 传值到子组件B,子组 ...
- Java数组(1):数组与多维数组
我们对数组的基本看法是,你可以创建它们,通过使用整型索引值访问它们的元素,并且他们的尺寸不能改变. 但是有时候我们需要评估,到底是使用数组还是更加灵活的工具.数组是一个简单的线性序列,这使得元素访问非 ...
- Kubernetes Dashboard的安装与坑【h】
1.前言 https://github.com/kubernetes/dashboard/releases kubectl apply -f https://raw.githubusercontent ...
- C++学习笔记-STL
C++ STL (Standard Template Library标准模板库) 是通用类模板和算法的集合,它提供给程序员一些标准的数据结构的实现如 queues(队列), lists(链表), 和 ...