vue-cli3多环境配置--更新

之前写个主要是针对了不同的环境发布有不同的参数配置的时候，为了不用每次去更改才能发版而做的多环境配置

但是如果你的环境不需要配置不同的参数，或者每个化境发布就是域名不一样而已的话，是不需要配置多个的。

我们只需要把访问的域名地址留空，打包之后就会自动读取当前域名。

例如：
‘

那肯定会有人问那开发的时候，不打包怎么办，那简单啊，在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 $opt in
    v)
        version=$OPTARG
        echo "version=$version"
        ;;
    s)
        imageServer=$OPTARG
        echo "imageServer=$imageServer"
        ;;
    p)
        project=$OPTARG
        echo "project=$project"
        ;;
    f)
        buildfile=$OPTARG
        echo "buildfile=$buildfile"
        ;;
    \?)
        echo "invalid param"
        ;;
  esac
done

if [ -z "$version" ] || [ -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=https://registry.npm.taobao.org && npm run build:$buildfile
docker build -t "${projectName}:${version}" -f dockerConfig/Dockerfile .
docker tag "${projectName}:${version}" "${imageServer}/${project}/${projectName}:${version}"
docker push "${imageServer}/${project}/${projectName}:${version}"

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

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;
}