浅谈vue-cli加载不到dev-server.js的解决办法
更新时间：2017年11月24日 11:40:59 作者：鱼是什么鱼
本篇文章主要介绍了浅谈vue-cli加载不到dev-server.js的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用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)
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
下面小编就为大家分享一篇Vue之Vue.set动态新增对象属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文给大家总结了Vue中操作dom元素的多种方法，每种方法结合实例代码给大家讲解的非常详细，需要的朋友参考下吧2022-12-12
下面小编就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue-axios-post数据后端接不到问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了详解vue父子组件关于模态框状态的绑定方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue使用swiper的时候第二轮事件不会触发问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了vue使用iframe嵌入网页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
最新评论