基于Vue-cli搭建的项目如何和后台交互

Yangder 发布于2019-08-22 18:22 / 1142人阅读

摘要：请求实际发出去的请求是配置一个适用于本地和生产环境的后台请求按照上面的配置好以后，本地环境可以成功的跨域和后台交互了。

这段时间在折腾有vue做开发，之前也用过，但是大部分都是用一些简单的数据绑定。踏了很多坑，总结了一下，希望对刚刚开始折腾的小伙伴有帮助。

常见问题一：用vue-cli搭好环境以后，本地域名和测试环境的域名不一致，怎么跨域访问后台接口？

在config目录下找到index.js，在dev下添加如下:

proxyTable: {
      "/api":{//指定以/api开头的接口都走代理
          target:"https://yhhdtest.moguyun.com",//需要连接后台接口的域名
          changeOrigin:true,//支持跨域
          pathRewrite:{
              "/api":""
          }
      }
    },

以上的配置其实是dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。

请求/api/getGame实际发出去的请求是 https://yhhdtest.moguyun.com/...

配置一个适用于本地和生产环境的后台请求

按照上面的配置好以后，本地环境可以成功的跨域和后台交互了。但是每个接口前面都要加一个原本不需要的/api前缀，这个其实和我们生产是不符合的。这个时候需要我们做一些配置，通过编译来区分。

在index.js下分别找到dev和prod（有的项目可能直接抽出来，多带带成文件了）

dev.env.js
module.exports = merge(prodEnv, {
    NODE_ENV: ""development"",
    API_HOST:""/api/""
})

prod.env.js
module.exports = {
    NODE_ENV: ""production"",
    API_HOST:""""
}

关键点在于API_HOST，这个时候我们的请求可以这么写

process.env.API_HOST+"/getGame"

GPU云服务器云服务器 html如何后台交互基于webrtc的项目基于webrtc的开源项目网站后台如何搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95781.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0