基于Vue-cli搭建的项目怎么和后台交互 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了基于Vue-cli搭建的项目怎么和后台交互,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

常见问题一:用Vue-cli搭好环境以后,本地域名和测试环境的域名不一致,怎么跨域访问后台接口?

在配置目录下找到索引。js,在dev下添加如下:

proxyTable:, { 　　& # 39;才能/api # 39;:{//指定以/api开头的接口都走代理　　,,目标:& # 39;https://yhhdtest.moguyun.com& # 39;//需要连接后台接口的域名　　,,changeOrigin:真的,//支持跨域　　,,pathRewrite: { 　　,,,& # 39;/api # 39;: & # 39; & # 39; 　　,,} 　　,,} 　　},

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

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

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

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

在index.js下分别找到开发和刺激(有的项目可能直接抽出来,单独成文件了)

dev.env.js

module.exports =,合并(prodEnv, { 　　,NODE_ENV: & # 39;“development" & # 39; 　　,API_HOST: & # 39;“/api/? # 39; 　　})

prod.env。js

module.exports =, { 　　,NODE_ENV: & # 39;“production" & # 39; 　　,API_HOST: & # 39;““& # 39; 　　}

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

process.env.API_HOST + & # 39;/getGame& # 39;

感谢你能够认真阅读完这篇文章,希望小编分享的“基于Vue-cli搭建的项目怎么和后台交互”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!