前言：
有这样一个需求，需要在多个不同的服务器下部署同一个前端项目，（正常操作是每一台服务器都根据不同的IP地址build一个包依次部署，非常繁琐，因此简化为多个环境只需要用打一个包即可）
解决方案：首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行.sh文件来获取环境变量set到项目中
以下是vue项目为例， React ，Angular 均可以使用
1，在项目根目录创建 run.sh 文件
# 获取当前系统环境变量
API_URL="${apiUrl}"
sed -i "s|<body>|<body API_URL=\"$API_URL\" >|" ./dist/index.html
注解：
第一行 apiUrl为当前系统配置的系统环境变量名称
第二行 将获取到的ip地址赋值到打包后的dist文件下index.html下的body中
2，项目中使用
// 在api的公共配置中使用
function createRequestFunction (service) {
return function (config) {
const token = localStorage.getItem('token')
const API_URL = document.querySelector('body').getAttribute('API_URL') // 使用获取的环境变量
const configDefault = {
headers: {
Authorization: token,
'Content-Type': get(config, 'headers.Content-Type', 'application/json')
},
timeout: 600000,
baseURL: 'http://' + API_URL ,
data: {}
}
return service(Object.assign(configDefault, config))
}
}
3，将打包后的dist文件上传到服务器后，运行 run.sh，运行完成，页面就可以正常请求啦~
运行命令如下，也可手动运行
bash run.sh
重要：需要在部署的服务器提前配置系统环境变量API_URL，否则获取不到
网友评论