分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

Json-server在Vue 2.0中使用--build文件中没有dev-server文件

发布时间:2023-09-06 02:27责任编辑:蔡小小关键词:暂无标签

    跟大佬的视频使用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文件

原文地址:https://www.cnblogs.com/gsdoublel/p/10190423.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved