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文件夹下时

原文链接：https://blog.csdn.net/weixin_44049825/article/details/105104588