在运行时将环境变量注入vue项目Vue-cli 官方文档中详细介绍了环境变量的配置方法，在项目根目录中放置根据不同模式放

Vue-cli 官方文档中详细介绍了环境变量的配置方法，在项目根目录中放置根据不同模式放置对应文件来指定环境变量。这种方式注入环境变量发生项目构建时，也就是说一旦构建成功，环境变量的值固定，如果修改需要再次构建。假如我希望在项目运行时修改环境变量呢？

我们知道，生产模式部署项目通常分为两步：

npm build 打包项目到 dist 目录
nginx 反向代理运行 dist 文件

我期望重启 nginx 时候更新环境变量。毕竟生产模式部署大多时间花费在构建过程中。如果项目中代码修改，重新构建是必须的。假如我只是修改了环境变量，那再重新构建就太浪费时间了。

项目用到的技术栈，VueCLI、Docker、Kubernete。项目执行 npm run build 生成 dist 文件，dist 下 public 文件夹内容不会打包压缩，保持原样输出。public 目录下创建 env.js

window.envs = {
	 "VUE_APP_ENV_MyURL": "..."
}

public 目录下 index.html 中引入 env.js

<body>
  ...
  <script src="./env.js"></script>
</body>

接下来只要在 nginx 重启前修改 env.js 文件就可以了。有两种方案：

k8S ConfigMap 直接替换 env.js。具体参考文档 kubernetes.io/zh/docs/con…
使用自定义脚本替换 env.js 中的常量

#!/bin/sh

ROOT_DIR=/usr/share/nginx/html

# Replace env vars in JavaScript files
echo "Replacing env constants in JS"
for file in $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js;
do
  echo "Processing $file ...";

  sed -i 's|VUE_APP_API_BASE_URL|'${VUE_APP_API_BASE_URL}'|g' $file 
  sed -i 's|VUE_APP_CLIENT_ID|'${VUE_APP_CLIENT_ID}'|g' $file

done

echo "Starting Nginx"
nginx -g 'daemon off;'