本文已参与「新人创作礼」活动，一起开启掘金创作之路。
之前写个主要是针对了不同的环境发布有不同的参数配置的时候，为了不用每次去更改才能发版而做的多环境配置
但是如果你的环境不需要配置不同的参数，或者每个化境发布就是域名不一样而已的话，是不需要配置多个的。
我们只需要把访问的域名地址留空，打包之后就会自动读取当前域名。
例如： ‘
那肯定会有人问那开发的时候，不打包怎么办，那简单啊，在vue.config.js配置文件里面直接配置一下相关的代理就可以了。如下图
说一下pathRewrite，这个参数呢是为了在我们开发的时候把/api这个干掉的，有人会问为什么要干掉，那肯定是和打包之后的文件有关。
因为我们项目打包之后去请求页面的静态资源文件的时候也是一个get请求，我们有一些接口也是get请求，但是当我们不做任何区分的时候，服务端就不知道我们当前请求的是静态资源还是接口。
所以为了区分这两者，所以才nginx代理配置的时候就需要做一下区分，到底是请求接口数据还是静态资源，所以就会发现接口请求的时候地址前面多了一个/api
但是我们开发的时候没有经过nginx配置，我们启node服务的时候我们就需要把这个/api给去掉，但是如果每次去手动改就太麻烦了，所以就要配置一下pathRewrite
——————————以下是之前的原文————————————
由于之前的配置发布到不同环境是根据不同的分支来部署的，所以部署的时候相关配置都在env.production里面进行配置的，如下图
但是在实际的执行中存在很不便之处，比如说test分支主要针对测试环境进行部署，新的功能和迭代在develop分支上进行开发，开发完成后就需要merge到test分支去部署。
meger的过程往往会导致test分支上的production配置被覆盖，等于每merge一次就需要手动去更改一次配置信息，才能保证代码部署成功，不报错。
为了减少这样不必要的麻烦，所以配置了多个环境，如图
顾名思义，development是开发环境，utest是测试环境，production是正式环境，当然如果有其他环境和功能定制化开发，可以在不影响其他环境和配置的前提下进行单独配置
如要打包成功，除了production配置文件外的其他配置文件，则必须在配置文件里添加 如下参数，不然不会进行打包压缩等等一系列操作，或者说，多环境配置失效
在配置文件配置好了以后，我们则需要在package.json里面进行相关的打包命令的配置，如图
在执行docker部署的时候，只需要将打包命令对应相应的打包环境即可，一劳永逸。
docker部署文件 docker.sh
#!/bin/bash set -ex
projectName=phishing-ui version= imageServer=harbor.tophant.com project=portal
while getopts "v:s:p:f:" opt; do case OPTARG echo "version=OPTARG echo "imageServer=OPTARG echo "project=OPTARG echo "buildfile=$buildfile" ;; ?) echo "invalid param" ;; esac done
if [ -z "imageServer" ] || [ -z "$project" ]; then echo "例子: ./dockerConfig/docker.sh -v 1.0.0 -s harbor.tophant.com -p portal" echo "参数说明：" echo " -v 镜像版本号" echo " -s 镜像仓库服务地址" echo " -p 镜像仓库项目名" echo " -f 前端构建配置指定" exit 1 fi
npm install --registry=registry.npm.taobao.org && npm run build:{projectName}:{projectName}:{imageServer}/{projectName}:{imageServer}/{projectName}:${version}"
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 dockerfile
FROM nginx:1.19.3 COPY ./dist /opt/dist COPY ./dockerConfig/nginx/nginx.conf /etc/nginx/nginx.conf COPY ./dockerConfig/nginx/conf.d /etc/nginx/conf.d 1 2 3 4 nginx > nginx.conf
user nginx; worker_processes 1;
error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid;
events { worker_connections 1024; }
http { include /etc/nginx/mime.types; default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;
include /etc/nginx/conf.d/*.conf;
}
