### vue-cli3 实现打包后暴露可修改接口地址文件
在前后端分离的开发模式中,有时候我们开发好打包的文件在部署完之后,需要去修改获取接口的地址,这个时候就需要前端修改完之后重新打包再部署了,但是如果我们只是需要修改接口地址时,反复的重新打包就太麻烦了,接下来就分享一种简单方法,让大家可以在打包完之后只修改打包好的文件夹下的一个文件,就可以达到修改接口的作用。
1.首先我们在public文件夹下创建一个config.json文件(public文件夹默认不打包),然后在里面写入我们的接口地址,如:
```javascript
{
"BASE_URL":"http://127.0.0.1:8888"
}
```
2.然后在我们需要使用到axios请求接口的页面或者封装接口请求的管理页面获取基础接口地址,如:
```javascript
//apilist 这是我封装的接口统一管理文件文件
// 先引入axios
import axios from 'axios'
// 定义基础接口地址
var base_url = ''
// 请求存储基础接口地址的json文件,获取保存的接口基础地址
axios.get('./config.json').then(res=>{
base_url = res.data.BASE_URL // 获取保存的接口基础地址
}
)
// 然后就可以在下面请求我们的接口地址了,比如我们需要请求一个用户详情的接口,可以这样写:
getUserInfo(id){
return axios.get(`${base_url/api/userinfo}?userId=${id}`)
}
```
3.这样打包完之后,我们就可以看到打包完的文件夹里面就有config.json这个文件了,我们可以直接使用记事本等工具打开修改里面的基础接口地址,保存之后重新运行我们的项目就可以切换接口地址了