小白一个全新的vue项目配置连接接口的相关配置

我是小白，随手一记，用来后续参考

1、首先，一个项目要想连接接口，首先要安装axios，直接命令安装就行，request啥的不用安装，自带的，这个是连接接口用的，一个好的项目都是要封装的，即src下新建一个axios文件-index.js

index.js文件解析：

以上就是axios——index.js的配置文件，相关配置了

2、这里是公用的loading文件，

这是公用的loading文件解析

3、然后就是再封装一个请求接口时的统一请求方式，就是为了方便，可以再conmmon.js里边也可以在api——index.js里边，代码写法还是一样，只是在common里边，都是一些公用的方法，在main。js里边进行一个公用的配置，就可以全局使用了，如果使用api——index.js 那就需要再重新在main。js中改一下，引入全局就行

4、这个项目里边写在了commin。js里边，见main，js的配置

5、使用：直接这样调用this.common.serverApi就可以了，传参和请求方式，接口都在这里边改

6、还有一点差点忘了就是跨域，就是连接的后台的地址，默认端口这些：

跨域相关的百度一下也是可以的，有些配置都没写全，按需写的；

以下是两个项目中不同的写法，大同小异，1和上边是一个项目；2是另一个的

1 1

另一个项目的：

2 2 2

总结：其实我还是不大清楚，只知道大概，反正我觉得配置axios。必须的文件就是（从这个项目粘贴复制拿的话就是下边几个）项目放网盘了

注意：axios中 get参数使用params,post参数使用data

axios——index.js

utils——common.js和loading.js（utils文件夹下一般都写一些公用的方法）（注意：其实api——index。js的写法和common。js中一样，步骤3上边也说了，如果使用api——index.js 那就需要再重新在main。js中改一下，引入全局就行）这样做的好处就是不用在每个文件里边都import 接口那个文件了，需要哪个就在单页面里边直接用

还有一个就是跨域的配置。在vue.config.js里边

还有一个容易忽略的就是.env文件，里边其实就两行代码，本系统的名称和一个配置axios时的baseURL

t推荐一个文章：感觉写的很清楚

https://blog.csdn.net/qq_41809113/article/details/121705383?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-121705383-blog-123028044.pc_relevant_downloadblacklistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-121705383-blog-123028044.pc_relevant_downloadblacklistv1&utm_relevant_index=1