如何修改Vue项目打包后基础接口地址配置？

本文共计1183个文字，预计阅读时间需要5分钟。

目录

一、目的

二、具体操作实现

三、总结

四、近期在学习或工作中遇到的问题

五、Vue前端项目打包后，如何再次修改请求后端接口的基础地址

六、在Vue项目中使用axios时，如何处理请求超时

目录

• 一、目的
• 二、具体操作实现
• 总结

一、目的

最近在学习或工作中遇到，把 Vue 前端项目打包后，要求可以再次修改请求后端接口的基础地址。平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里。

这样子打包后如果要改图里红框处的地址，要么去打包编译后的文件堆里一个个搜索（如果项目不小的话，这文件堆可不少...），找到后直接改，要么在源码里改完后重新再打包部署，这两种做法都显得有些麻烦，且维护性也不好。

所以本文用一种较好的方案来解决以上问题，通过创建一个静态资源里的外部文件，引入并实时获取，实现在 Vue 项目打包后也能方便修改请求后端接口的基础地址。

二、具体操作实现

1、前提：本文基于 vue-cli 3.x / 4.x 来实现的，相对应 vue-cli 2.x 来说，没有那么多复杂的配置操作（少了 build、config 文件夹和一些配置文件，多了 public 文件夹和 vue.config.js 文件）。