应用场景: 在我们开发过程中,如果遇到需要多服务器部署的情况,往往都是每个服打包一个文件操作繁琐,如何才能一套代码多服部署呢?
新增配置文件
文件路径: public/config.js
window.g={
baseURL:"http://192.168.1.90:8686",
}
引用配置文件
操作文件: public/index.html
<!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>
<script src="./config.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
配置baseURL
操作文件: src/utils/request.js
// create an axios instance
const service = axios.create({
baseURL: window.g.baseURL, // process.env.VUE_APP_BASE_API, url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
项目打包
npm run build:prod
打包后的目录结构
总结
通过上面三步骤的操作与配置后,如果想部署到每个服务器只需要第一次配置好(
config.js
)配置文件,其他时候更新代码直接一套代码部署多个服务器即可。