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('未出错')
  }
})

 部署后即可根据环境显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值