react项目中根据项目部署环境来显示logo

在前端直接写出logo路径，根据不同环境把对应logo的名称修改为显示的名称，如果本地就显示本，测试环境就显示测，线上就使用线上的图片最终显示的图片名称是favicon.ico

 

 

 

1.准备ico图片

2.前端配置：

 3.如何判断当前环境

因为项目是使用的一个镜像去部署所以他们打包后的代码内容是一样的，在编译阶段就无法知道是什么环境，目前采取的方式是因为node环境是可以获取字段判断当前环境的，所以可以在dockerFile文件中去执行node的脚本去修改图片名称

dockerfile文件：

FROM node:18-alpine as builder
MAINTAINER yanghengfeng <yanghengfeng@shoplazza.com>
RUN echo "http://mirrors.aliyun.com/alpine/v3.15/main" > /etc/apk/repositories
RUN echo "http://mirrors.aliyun.com/alpine/v3.15/community" >> /etc/apk/repositories
RUN apk add wget
WORKDIR /app
COPY package.json /app/
COPY package-lock.json /app/
COPY favicon.js /app/   #复制脚本文件
RUN npm i --registry=https://registry.npmmirror.com
COPY . /app/
ARG OSS_ASSETS_ENDPOINT
ARG OSS_SHOPLAZZA_ENDPOINT
ARG OSS_ASSETS_ID
ARG OSS_ASSETS_SECRET
ARG OSS_ASSETS_BUCKET
ARG CI_COMMIT_REF_SLUG
RUN npm run build && wget -q http://gosspublic.alicdn.com/ossutil/1.6.18/ossutil64 && chmod 755 ossutil64 && ./ossutil64 cp --recursive -e $OSS_ASSETS_ENDPOINT -f -i $OSS_ASSETS_ID -k $OSS_ASSETS_SECRET  -r --loglevel=debug ./dist "oss://${OSS_ASSETS_BUCKET}/aquaman/"


# build real image
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist /app
COPY --from=builder /app/favicon.js /app  //复制脚本文件
RUN npm i -g http-server-spa --registry=https://registry.npmmirror.com
EXPOSE 80 443
HEALTHCHECK --interval=5s --timeout=1s CMD  wget --quiet --tries=1 --spider http://localhost/ || exit 1
CMD ["sh","-c","node favicon.js && http-server-spa . index.html 80"]//执行脚本

 脚本内容

let fs = require('fs');
let  env = process.env.ENV;//获取环境字段
let oldName = './production.ico';
let newName = './favicon.ico';
if(env=='production'){
  oldName = './production.ico';
}else if(env=='staging'){
  oldName = './favicon-staging.ico';
}else if(env=='development'){
  oldName = './favicon-localhost.ico';
}else if(!env){
  oldName = './favicon-old.ico';
}else{
  oldName = './favicon-unkown.ico';
}
fs.rename(oldName,newName,(err)=>{
  if(err){
    console.log('出错')
  }else{
    console.log('未出错')
  }
})

 部署后即可根据环境显示