目前来说,前端和后端是分开的,然后运维那边想要换服务器,如果总换服务器,那api地址也是总换,就要不停的打包部署,现在就是想要实现打一次包就可以在打包的dist文件夹里动态修改api地址,在网上查到有两种方法都可以实现这种直接在dist文件里面进行修改,无需反复打包
第一种:
- 在public增加config.js文件
window.ipConfigUrl = {
baseURL:"http://192.168.0.76:31900"
}
- 在public下的index.html引入config.js文件
<script type="text/javascript">
document.write("<script src='./config.js?v=" + new Date().getTime() + "'><\/script>");
</script>
- 在请求文件里使用,比如:
const service = axios.create({
baseURL: window.ipConfigUrl.baseURL, // url = base url + request url
// baseURL: 'http://127.0.0.1:8888/', // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
})
- 最后打包结果会出下一个config.js文件,以后就可以直接在那里面修改了
第二种:
直接在public下的index.html文件中用window自带的方法写被请求的ip地址:
window.IPConfig = {
//此处的IP在打包不会被编译,可修改
baseURL: "192.168.1.94:8080"
}
在请求文件里的方法使用就和第一种是一样的
同上两种方法在不同服务器部署的时候,直接编辑baseUrl即可实现修改api服务地址