欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-13 20:23:33
...
这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互,内容挺不错的,现在分享给大家,也给大家做个参考。

这段时间在折腾有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/getGame

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

按照上面的配置好以后,本地环境可以成功的跨域和后台交互了。但是每个接口前面都要加一个原本不需要的/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'

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于vue解决跨域路由冲突问题的思路

关于vue.js前后端数据交互之提交数据的操作

基于vue cli重构多页面脚手架过程的介绍

以上就是基于Vue-cli搭建的项目如何和后台交互的介绍的详细内容,更多请关注其它相关文章!