浅谈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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
js实现select下拉框菜单
Dec 08 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
详解JavaScript中return的用法
May 08 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 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 array_search() 函数使用
2010/04/13 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
DOM 基本方法
2009/07/18 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
2020/09/04 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
遗传算法之Python实现代码
2017/10/10 Python
Python中django学习心得
2017/12/06 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python FFT合成波形的实例
2019/12/04 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
学习Python需要哪些工具
2020/09/04 Python
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
房屋租赁协议书范本
2014/04/10 职场文书
开展读书活动总结
2014/06/30 职场文书
结婚通知短信大全
2015/04/17 职场文书
婚礼答谢词范文
2015/09/29 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server