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

1.首先我们在public文件夹下创建一个config.json文件(public文件夹默认不打包),然后在里面写入我们的接口地址,如:

{
	"BASE_URL":"http://127.0.0.1:8888"
}

2.然后在我们需要使用到axios请求接口的页面或者封装接口请求的管理页面获取基础接口地址,如:

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


4.ps:有小伙伴打包的方式可能跟我不一样,这样可能会导致在获取json文件的时候导致文件获取不到,这个时候在我们去获取接口基础地址的时候按照自己的实际情况修改就可以了,比如你打包完之后的js文件是在js文件夹下,这个时候我们去获取json文件的时候可以修改路径为:

axios.get('../config.json') // 当你的js文件是在js文件夹下时