1、背景
为了适用Vue项目上云过程中多环境配置分离的需要，达到一处打包多处部署的效果，拟采用打包后动态加载baseURL的方式进行多环境的配置分离，云上环境使用动态挂载从configMap的方式对被引用文件进行替换。
2、操作步骤
1）public/js文件夹下新建 remote.js
# remote.js
const url= `/dev-api` // 配置服务器地址
2) index.html中引入remote.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 引入下列代码 -->
<script src="./js/remote.js"></script>
</body>
</html>
3）配置request.js中baseURL为baseUrl
1 设置baseURL为 baseURL
const service = axios.create({
// eslint-disable-next-line no-undef
baseURL: baseURL,
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
4) 配置configmap挂载到云上static路径
分别撰写针对dev、test、preprod、prod等不同环境的configmap，云上部署时根据环境不同挂载不同的configmap替换原remote.js文件
