前端多环境部署
前端程序一般会部署在开发、生产等不同环境中,各个环境的配置信息可能不同。例如:
- api域名
// 生产
baseUrl="http://www.xxx.com";
// 开发
// baseUrl="http://www.xxx.cn";
- 日志打印控件
// 生产
new Vconsole();
// 开发
// new Vconsole();
- 移除日志打印
// 生产
// babel.config.js
const plugins = [];
plugins.push([
"transform-remove-console",
{
exclude: ["warn", "error"]
}
]);
module.exports = {
plugins
}
// 开发
// babel.config.js
const plugins = [];
// plugins.push([
// "transform-remove-console",
// {
// exclude: ["warn", "error"]
// }
//]);
module.exports = {
plugins
}
最直接的方法就是 通过修改或注释代码来切换环境配置。但这会增加上线检查的工作量,同时人工检查容易出错。那么,如何做到自动加载环境配置呢?
实现方案
实现思路: 准备多套环境配置,在程序运行时加载对应的配置信息。实现程序和配置信息解耦。
后端程序是运行在服务器的,可以在程序启动时加载指定的配置文件,并且支持动态修改环境变量。与后端不同的是,前端程序是运行在浏览器的,如何加载和动态修改配置信息呢?
常见的实现方案有两种:
- 静态编译。
- 动态加载。
静态编译
在程序编译时,加载环境配置并对代码中引用的环境变量进行字符串替换。
这种方案实现简单,但程序和配置耦合,每个环境部署都要编译一次; 而且,不支持动态修改,每次变更都要重新编译上线。
- 准备开发和生产的配置。
// .env.development
NODE_ENV = development
VUE_APP_REMOVE_CONSOLE = 'false'
// .env.production
NODE_ENV = production
VUE_APP_REMOVE_CONSOLE = 'true'
- 指定编译模式,加载对应的配置文件。
// 开发环境
vue-cli-service build --mode development
// 生产环境
vue-cli-service build --mode production
动态加载
在程序启动时,获取配置信息并赋值给内存变量。
动态获取配置的方式有两种: 接口请求和首页html附带上配置信息。
- 接口请求
在程序的入口处,发起请求配置信息,把响应的数据赋值给内存变量,再执行后续的业务流程。
需要注意的是,这里多了一次网络请求,会延长首页的渲染时间。
- 首页html附带上配置信息
通过网关或nginx设置首页html的响应报文头,附带上配置信息。在加载首页html时,读取报文头的配置信息并赋值给内存变量。
动态加载实现了程序和配置解耦(一次编译可以多环境运行),并且支持动态修改配置。
实际开发一般会混搭两种方案:
- 静态编译用于编译配置。例如: 去除生产日志打印。
- 动态加载用于动态配置。例如: 打开调试控件,打开快捷键。
总结
前端程序一般会部署在开发、生产等不同环境中,各个环境的配置信息可能不同。
可以通过静态编译和动态加载的方式来实现自动加载环境配置。
最终实现程序和配置解耦,并且支持动态修改配置。