vue开发前后端分离前端如何调用后端接口？

Question

对前后端分离如何调用接口这块感觉一直没怎么弄明白，但又不知如何说明，下面我模拟一个项目说明我的问题。

现在我们有个项目，前端用vue开发，后端php开发，后端测试地址为：localhost:8181，项目服务器地址是：www.cocoy.com。在开发阶段模拟数据（userdata.json）是放在static文件夹里，而在后端与userdata.json对应的文件userdata.php是在abc文件夹里的。

我的问题是：在开发阶段读取数据是这样的:get("../static/userdata.json")，那在测试阶段是不是要改成：get("http://localhost:8181/abc/userdata.php")。在生产环境把数据传到服务器后又该怎么读取数据，难道是：get("http://www.cocoy.com/abc/userdata.php")？

还是说传到服务器后前端和后端的文件分别放在不同的文件夹里，然后前端调用后端接口直接这样：get("../后端文件夹/abc/userdata.php")？如果是这样的话是不是只要将vue的设置文件里将static名称改一下就可以了？

对这块一直没弄明白，希望大佬能解释透彻一点，感激不尽！！！

Answer 1

你应该先了解一下 axios

Answer 2

1.你说的在不同的环境下请求不同的api是对的2.一般来说不管开发环境还是测试环境还是线上环境，url的路径都是一个，只是前缀不同，这个前缀可以根据打包环境的变化来自适应3.你现在的开发环境的mock是mock了json，可以在dev-server里启动mock服务器，mock请求