VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js,如何使用axios+express配置路由转发

VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。

目前正在学习慕课网上的vue2.0教程-QQ音乐APP,由于视频演示的是webpack2.x,而自己操作实际的webpack已经是3.6.0了。现在有个需求就是通过请求https://c.y.qq.com/splcloud/f... 拿到歌单数据,因为有referer限制

所以需要代理请求。视频中老师的做法是在build下的dev-server.js下配置如下:

 

 

但是我目前的webpack版本较高,已经没有了这个dev-server.js文件,现在只需要在 webpack.dev.conf.js中按如下配置就好了:

第一步,在const portfinder = require('portfinder') 这一行下边写如下:

第二步,找到 devServer 对象,在它里面写如下:

 

再次运行npm run dev ,项目就能正常获取数据并且正常运行了!

总结如下:

webpack旧版本中,vue-cli生成初始化项目的时候build下生成dev-server.js文件,新版本中没有这个文件,它和webpack.dev.server.js都融合在一起了,配置axios和express代理的时候出了一些问题 

要把旧的

apiRoutes.get('/getDiscList', function (req, res) {
  
})

改为

before(app) {
    app.get('/api/getDiscList', (req, res) => {
   
     })
}

需要注意两点: 

1、要把旧版本的apiRoute.get()改为app.get()
2、要把原有的url地址'/getDiscList'改为'/api/getDiscList'

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack-dev-server是一个用于开发环境的工具,它提供了一个实时重载的开发服务器。通过使用命令"> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",你可以启动webpack-dev-server,其"--inline"选项用于在浏览器内联模式显示编译错误和警告,"--progress"选项用于在控制台显示编译进度,"--config build/webpack.dev.conf.js"选项用于指定webpack配置文件的路径。这个配置文件包含了开发环境的相关配置信息,例如入口文件、输出路径等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [> devwebpack-dev-server --inline --progress --config build/webpack.dev.conf.js](https://blog.csdn.net/chanyeolchichi/article/details/124688983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js](https://blog.csdn.net/qq_18671415/article/details/109306424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue-cli项目根据线上环境分别打出测试包和生产包](https://download.csdn.net/download/weixin_38643141/13588313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值