持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
一、背景
比较早期的版本，前端项目都是根据host地址和写死在前端代码里的端口，去做接口请求。这种版本有一个很麻烦的地方，就是部署项目的时候，端口必须与前端写死的一致，多个项目部署起来，端口就有可能因为设计不合理而冲突
二、具体实现方案
1、在public路径下，创建一个serveConfig.json的文件，并把所有api请求地址写上。如图所示。
2、在main.ts中，在vue实例挂载之前，读取serveConfig.json文件，获取里面的配置，并且存放在会话缓存中。
3、在Api地址统一配置里，增加更新URL的方法，获取会话缓存中的地址信息
4、在App.vue里，当vue实例挂载后，执行一次更新url的方法，如果某些地址需要拿应用服务中心的，就走接口拿数据
5、第一次加载时，如果在全局路由这里，也没拿到某地址，触发一下获取更新url，还是没有，也走接口拿数据
6、打镜像包时，如下填写。并把相关字段给部署的同事。需要部署的时候，把相关字段写入环境变量中，修改serveConfig.json的值，达到动态配置地址的效果。
#!/bin/bash
eval Authcenter_ApiUrl=${Authcenter_ApiUrl}
eval Authcenter_ImgUrl=${Authcenter_ImgUrl}
eval defaultHost=${defaultHost}
eval cloudApiPort=${cloudApiPort}
eval onlyOfficePort=${onlyOfficePort}
eval centerApiPort=${centerApiPort}
eval wsPort=${wsPort}
eval webdavPort=${webdavPort}
echo "{
"Authcenter_ApiUrl": "${Authcenter_ApiUrl}",
"Authcenter_ImgUrl": "${Authcenter_ImgUrl}",
"defaultHost": "${defaultHost}",
"cloudApiPort": "${cloudApiPort}",
"onlyOfficePort": "${onlyOfficePort}",
"centerApiPort": "${centerApiPort}",
"webdavPort": "${webdavPort}",
"wsPort": "${wsPort}"
}" > /var/www/html/manage/serverConfig.json
nginx
/bin/bash #保留一个终端，防止容器自动退出
三、总结
通过几个版本的迭代，该版本提供了host方式的配置和动态配置完整api，两种形式，用以适应更多变化的情况
