场景
在 Vue CLI 模式和环境变量 中介绍了向客户端侧代码中注入环境变量的方式，但是这种方式是在构建时注入的。如果存在不同的环境，那么就需要定义不同的 .env.xxx 文件，并且也需要针对指定环境进行构建才可以生效。
目前前端部署采用 docker 的方式，不同的环境需要分别构建和打包生成 docker image 很影响效率。在群里抛出问题之后，很快收到一些不错的方案。原理都是类似的，在 html 中加上读取 config.js 文件，该文件将变量值注入到 window 域下。利用容器启动的时候向容器传递环境变量时，改变其内容。
实现
原理类似，根据实际项目情况采用的方式稍有差异，我们采用如下方式：
- 在
public目录下，定义config.js文件内容，用于在容器启动的时候将其进行替换；
// CONFIGURATIONS_PLACEHOLDER
- 在
public/index.html中新增读取config.js的配置；
<script src="<%= BASE_URL %>config.js"></script>
- 在容器启动的
entrypoint.sh中新增根据环境变量，将其写入到config.js的逻辑。如下我们再容器启动的时候向其传递VUE_APP_SITE_ENV；Dockerfile
... 省略
COPY ./dist /usr/share/nginx/html
... 省略
ADD ./scripts/entrypoint.sh /sbin/entrypoint.sh
CMD ["/sbin/entrypoint.sh"]
entrypoint.sh
... 省略
CONFIG_JSON_STRING='window.configs = {\
"VUE_APP_SITE_ENV":"'"${VUE_APP_SITE_ENV}"'",\
}'
sed -i "s@// CONFIGURATIONS_PLACEHOLDER@${CONFIG_JSON_STRING}@" /usr/share/nginx/html/config.js
exec /usr/sbin/nginx -g 'daemon off;'
- 在
src/utils/env中定义读取变量的方法，默认从 window.config 下读取，后面从process.env读取 主要适配本地开发模式使用。
export default function getEnv(name) {
return window?.configs?.[name] || process.env[name]
}
-
在需要使用的地方引入
getEnv即可。 -
容器启动的时候向其传递变量值。
VUE_APP_SITE_ENV=xxxx
