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”的目标.确保已运行还原,且 ...
随机推荐
- java 8 中文API
java 8 中文API 转 https://blog.csdn.net/gao_zhennan/article/details/72871202 java 1.6 帮助文档 中文链接:http:// ...
- Django View视图
视图view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者 ...
- nodejs的事件循环1
JavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直试图在寻找一条核心 ...
- Linux shell脚本重试机制
重试机制在实际编程场景中应用比较场景,比如你的任务在请求一个正在写入数据但不确定什么时间会完成的文件,可能就需要通过尝试机制间隔一段时间重新执行任务. 以下 shell 脚本是实现重试机制的模板: # ...
- window 10 安装vs2013启动web项目报错Id端口不能启动iis
https://www.cnblogs.com/leolion/p/3789732.html 如果我们想在Visual Studio2013上调试64位ASP.NET MVC的网站(本机环境X64), ...
- docker 导出多个镜像合并成一个tar
导出单个镜像 docker save [images] > [name.tar] 倒出多个镜像合并成一个tar包 docker save [images] [images] > [name ...
- clrscr()及gotoxy()函数
1.clrscr() 作用:清屏,跟 cmd 中的清屏作用一样 注意:只有在 Trubo C 中能用,需要包含头文件:conio.h 替代:system("cls"); 需要头文件 ...
- oracle+mybatis批量插入踩坑记
最近在项目中需要使用oracle+mybatis批量插入数据,因为自增主键,遇到问题,现记录如下: 一.常用的两种sql写法报错 1.insert ... values ... <insert ...
- Spring Cloud health节点通过注册中心扫描状态的简单实现
package com.zjs.web; import com.netflix.appinfo.InstanceInfo; import com.zjs.FallbackApiApplication; ...
- vue中的样式穿透
参考一下的文章即可: https://www.cnblogs.com/karthuslorin/p/9038854.html http://www.php.cn/js-tutorial-399072. ...