React/Vue 项目打包build后，动态修改env后台接口配置

很多朋友打包是通过webpack打包配置不同的环境配置，但都遇到一个问题，就是打包好build文件后，交给运维人员，怎么可以自行修改环境变量？

总思路

1. build打包时，根据env文件里的接口配置在build包里生成config.js文件，如果项目里没有env文件，也可以将要修改的接口配置整理一个ts文件，放到根目录下
2. build打包好的index.html文件里引用config.js文件

1. 交给运维人员后，运维人员可以修改build包里的config.js 来配置环境变量，但这个还会有个问题：每次配置的config.js在用户已经在使用的客户端如何更新？
2. 所以，运维人员修改环境变量配置：config.js时，最好时可以直接生成config + [hash].js文件，这样客户端index.html引用的是不同的config文件，就会即时更新

实践

1. 打包脚本附上：

#!/bin/bash

TIME=$(date "+%Y%m%d%H%M%S")

function copy_env_to_config_json() {
    array=($(cat .env))
    echo -e "window.g={" > config/config.js
    for ((i=0;i<${#array[@]};i++)); do
        num=$(echo $((${#array[@]}-1)))
        name=$(echo ${array[$i]%=*})
        value=$(echo ${array[$i]#*=})
        if [ "$i" == ${num} ];
        then
            echo -e "\"${name}\":\"${value}\"" >> config/config.js
        else
            echo -e "\"${name}\":\"${value}\"," >> config/config.js
        fi
    done
    echo -e "}" >> config/config.js
}

copy_env_to_config_json
echo "1. config.json save end"

sed -i "s%</head>%<script src='/config/config${TIME}.js'></script></head>%g" ./app/index.html
echo "2. set index.html end"

grep "process.env" -rl ./app* | xargs sed -i "s/process.env/(window as any).g/g"
echo "3. set process.env end"

npm run build
echo '4. build end'

mkdir ./build/config
mv ./config/config.js ./build/config/config${TIME}.js
echo '5. move config.js to build end'

mv .env ./build/config/.env
echo '6. env end'

echo "TIME=${TIME}" >> ./build/config/.env
echo "7. set time end"

1. 运维人员运行脚本：

#!/bin/bash
CONFIG=""
TIME=$(date "+%Y%m%d%H%M%S")
function echo_green {
    echo -e "\033[32m$1\033[0m"
}

function setConfig {
    newConfigArr = ($CONFIG)
    for ((i = 0; i < ${#newConfigArr[@]}; i++)); do
        num=$(echo $((${#newConfigArr[@]}-1)))
        name=$(echo ${newConfigArr[$i]%=*})
        value=$(echo ${newConfigArr[$i]#=* })
        sed -i "s%${name}.*%${newConfigArr[$i]}%g" build/config/.env
    done
}

function copy_env_to_config_json() {
    array=($(cat build/config/.env))
    oTime=""
    echo -e "window.g={" > build/config/config${TIME}.js
    for ((i=0;i<${#array[@]};i++)); do
        num=$(echo $((${#array[@]}-1)))
        name=$(echo ${array[$i]%=*})
        value=$(echo ${array[$i]#*=})
        if [ "$name" == "TIME" ];
        then
            oTime=${value}
        else
            if [ "$i" == ${num} ];
            then
                echo -e "\"${name}\":\"${value}\"" >> build/config/config${TIME}.js
            else
                echo -e "\"${name}\":\"${value}\"," >> build/config/config${TIME}.js
            fi
        fi
    done
    echo -e "}" >> build/config/config${TIME}.js
    sed -i "s/config${oTime}.js/config${TIME}.js/g" build/index.html
    sed -i "s%TIME.*%TIME=${TIME}%g" build/config/.env
    echo ${oTime}
    rm -rf build/config/config${oTime}.js
}

cat build/config/.env

echo_green "是否重新配置？"

read answer

if [ "$answer" == "y" ]; then
    echo_green "请输入config"
    read answer
    CONFIG=$answer
    setConfig
    copy_env_to_config_json
    echo_green "config 已修改成功"
    cat build/config/.env
    sed -i "s/\r//" build/config/config${TIME}.js
else
    echo_green ""
fi
exit

注意：此为项目部署在liunx系统的运行脚本，运维人员直接运行此脚本即可

大家有什么更好的思路，我们一起探讨研究，谢谢大家~