前端多环境部署

前端多环境部署

前端程序一般会部署在开发、生产等不同环境中，各个环境的配置信息可能不同。例如:

1. api域名

// 生产
baseUrl="http://www.xxx.com";
// 开发
// baseUrl="http://www.xxx.cn";
1
2
3
4

2. 日志打印控件

// 生产
new Vconsole();
// 开发
// new Vconsole();
1
2
3
4

3. 移除日志打印

// 生产
// 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

最直接的方法就是 通过修改或注释代码来切换环境配置。但这会增加上线检查的工作量，同时人工检查容易出错。那么，如何做到自动加载环境配置呢？

实现方案

实现思路: 准备多套环境配置，在程序运行时加载对应的配置信息。实现程序和配置信息解耦。

后端程序是运行在服务器的，可以在程序启动时加载指定的配置文件，并且支持动态修改环境变量。与后端不同的是，前端程序是运行在浏览器的，如何加载和动态修改配置信息呢？

常见的实现方案有两种:

1. 静态编译。
2. 动态加载。

静态编译

在程序编译时，加载环境配置并对代码中引用的环境变量进行字符串替换。

这种方案实现简单，但程序和配置耦合，每个环境部署都要编译一次; 而且，不支持动态修改，每次变更都要重新编译上线。

1. 准备开发和生产的配置。

// .env.development
NODE_ENV = development
VUE_APP_REMOVE_CONSOLE = 'false'

// .env.production
NODE_ENV = production
VUE_APP_REMOVE_CONSOLE = 'true'
1
2
3
4
5
6
7

2. 指定编译模式，加载对应的配置文件。

// 开发环境
vue-cli-service  build   --mode  development

// 生产环境
vue-cli-service  build   --mode  production
1
2
3
4
5

动态加载

在程序启动时，获取配置信息并赋值给内存变量。
动态获取配置的方式有两种: 接口请求和首页html附带上配置信息。

1. 接口请求
   在程序的入口处，发起请求配置信息，把响应的数据赋值给内存变量，再执行后续的业务流程。

需要注意的是，这里多了一次网络请求，会延长首页的渲染时间。

2. 首页html附带上配置信息
   通过网关或nginx设置首页html的响应报文头，附带上配置信息。在加载首页html时，读取报文头的配置信息并赋值给内存变量。

动态加载实现了程序和配置解耦(一次编译可以多环境运行)，并且支持动态修改配置。

实际开发一般会混搭两种方案:

• 静态编译用于编译配置。例如: 去除生产日志打印。
• 动态加载用于动态配置。例如: 打开调试控件，打开快捷键。

总结

前端程序一般会部署在开发、生产等不同环境中，各个环境的配置信息可能不同。

可以通过静态编译和动态加载的方式来实现自动加载环境配置。

最终实现程序和配置解耦，并且支持动态修改配置。