实现打包后暴露可修改接口地址文件

接口地址文件"/>

实现打包后暴露可修改接口地址文件

### 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这个文件了,我们可以直接使用记事本等工具打开修改里面的基础接口地址,保存之后重新运行我们的项目就可以切换接口地址了