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下如何将dts转换成dtb?
答: 使用dtc工具,如: <kernel source code dir>/scripts/dtc/dtc -I dts -O dtb -o <dtb filename> & ...
- MySQL有四种BLOB类型
先说明一下Blob的类型,直接从网上摘抄了!!!1.MySQL有四种BLOB类型: ·tinyblob:仅255个字符 ·blob:最大限制到65K字节 ·mediumblob:限制到16M字节 ·l ...
- jQuery常用操作部分总结
注意:$(“.xxx”) 类,一定要在前面加上点callback为完成后执行的函数名称隐藏显示:hide() show()淡入淡出:fadeIn() fadeOut() fadetoggl ...
- hibernate一对一映射
package loaderman.c_one2one; // 身份证 public class IdCard { // 身份证号(主键) private String cardNum;// 对象唯一 ...
- Git 解决冲突(3步)
今天新人从master分支合并到自己开发分支时有冲突了,不知道怎么解决,给他解决后,顺便简单记下,免得其他人问时还要再讲一遍 1.先切到自己的分支,拉下代码 git pull 2.向某个分支发起合并 ...
- 扩展:Zero Copy
- 无监督异常检测之LSTM组成的AE
我本来就是处理时间序列异常检测的,之前用了全连接层以及CNN层组成的AE去拟合原始时间序列,发现效果不佳.当利用LSTM组成AE去拟合时间序列时发现,拟合的效果很好.但是,利用重构误差去做异常检测这条 ...
- Python学习笔记——集合
1. 定义 num = {} print(type(num)) num2 = {1,2,3,4,5} print(type(num2)) <class 'dict'> <class ...
- 【Web网站服务器开发】apache和tomcat 阿帕奇和汤姆猫
经常在用apache和tomcat等这些服务器,可是总感觉还是不清楚他们之间有什么关系,在用tomcat的时候总出现apache,总感到迷惑,到底谁是主谁是次,因此特意在网上查询了一些这方面的资料,总 ...
- 【图像处理】H.264流媒体播放
相信有不少人和我一样,希望实现H264格式视频的流媒体播放.但是对于一个新手来说,往往不知道从何入手.利用百度,GOOGLE等搜索资料真是沙里淘金.在琢磨了N周之后,才弄出来了点成果,其中费了很多无用 ...