浅谈vue-cli加载不到dev-server.js的解决办法


Posted in Javascript onNovember 24, 2017

在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。

#webpack.dev.conf.js
//首先
// nodejs开发框架express,用来简化操作
const express = require('express')
// 创建node.js的express开发框架的实例
const app = express() 
// 引用的json地址
var appData = require('../data.json')
// json某一个key
var goods = appData.result

var apiRoutes = express.Router()
app.use('/api', apiRoutes)

1. get请求配置

const portfinder = require('portfinder')后添加

#webpack.dev.conf.js
// 在devServer选项中添加以下内容
before(app) {
 app.get('/api/someApi', (req, res) => {
  res.json({
   // 这里是你的json内容
  })
 })
}

注意: 修改配置文件完毕后,需要重新运行命令npm run dev即可。

2. post请求配置。

如果要配置post请求,需要在该文件夹配置如下:

#webpack.dev.conf.js
apiRoutes.post('/foods', function (req, res) { //注意这里改为post就可以了
 res.json({
  error: 0,
  data: foods
 });
})
// 在组件里面
#...vue
created () {
 this.$http.post('http://localhost:8080/api/foods').then((res) => {
 console.log(res)
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
AngularJS自动表单验证
Feb 01 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 #Javascript
vue 文件目录结构详解
Nov 24 #Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 #Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 #Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 #Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 #Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 #Javascript
You might like
一些PHP写的小东西
2006/12/06 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
openPNE常用方法分享
2011/11/29 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
VueJs组件之父子通讯的方式
2018/05/06 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python中random模块生成随机数详解
2016/03/10 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
视图的作用
2014/12/19 面试题
护理专业本科生自荐信
2013/10/01 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
商务英语毕业生自荐信范文
2013/11/08 职场文书
学雷锋演讲稿
2014/03/04 职场文书
学生手册评语
2014/05/05 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
写好Python代码的几条重要技巧
2021/05/21 Python
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
使用nginx配置访问wgcloud的方法
2021/06/26 Servers