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”的目标.确保已运行还原,且 ...
随机推荐
- Docker容器时间与主机时间相差8小时
查看主机时间 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间 root@b43340ecf5ef:/# date Wed ...
- kafka入门学习---1 启动kakfa
1.查看kafka生产者产生的数据 kafka-console-consumer.sh --zookeeper hadoop-:,hadoop-:,hadoop-: -topic kafkademo ...
- selenium 2019 笔记
1.get打开本地目录的方法
- LVS系列三、LVS集群-IP-TUN模式
一.LVS-IP TUN集群概述 DR方式是通过MAC,规模是一个交换网络.而TUN方式,是通过给数据包加上新的IP头部来实现,这个可以跨整个广域网.TUN模式可以解决DR模式下不能跨网段的问题,甚至 ...
- vue项目报错
在项目根目录下的.eslintrc.js中的rules下添加以下内容: /*代表不用eslint检测代码规范*/ "useEslint":false, /* tab和空格混用缩进, ...
- Spring-Kafka —— 消费重试机制实现
消息处理问题 在从Kafka主题接收消息之后立即处理消息的消费者的实现非常简单.不幸的是,现实要复杂得多,并且由于各种原因,消息处理可能会失败.其中一些原因是永久性问题,例如数据库约束失败或消息格式无 ...
- 异步模型 requestAnimationFrame
异步模型 requestAnimationFrame 前言 window.requestAnimationFrame() 告诉浏览器--你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函 ...
- python基础知识(函数2)
返回值 return return[value] 多个值用,逗号分开,没有返回值,会返回none值,函数不给指定返回值也会返回none值 def functionname(p1,p2,p3): re ...
- hive配置元数据库mysql文件配置
hive中conf/hive-site.xml文件配置(没有该文件则新建) <?xml version="1.0"?> <?xml-stylesheet type ...
- MySQL知识篇-nmon监控
说明1:监控MySQL服务器资源不止一种方式,这种nmon监控图形化.历史记录查询笔记方便,便于MySQL优化后,对比其效率不同,资源利用率不同. 说明2:摘抄自https://www.cnblogs ...