浅谈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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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中stream(流)的用法
2014/03/25 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
python对json的相关操作实例详解
2017/01/04 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python贪吃蛇游戏代码
2020/04/18 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python单元测试与测试用例简析
2019/11/09 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python包和模块的分发详细介绍
2020/06/19 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
自荐信如何制作?
2014/02/21 职场文书
工地标语大全
2014/06/18 职场文书
施工安全保证书
2015/05/09 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android