vue2项目中怎么使用vue-cli-service进行build多环境配置

问题遇到的现象和发生背景

发生背景（使用技术说明）
使用Aidex前端后台管理系统，是一个vue2的项目；
Aidex是依据若依的来的；
现象
项目的build多环境打包有问题；
原来的代码没有多环境打包，按照vue cli官网的进行配置打包，启动nginx访问dist时，无法登录

我的解答思路和尝试过的方法

我的思路：按照vue cli官网的进行配置打包，启动nginx访问dist时，127.0.0.1:8800，无法登录（登录接口报404）
package.json文件中配置

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:development": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production",
    "lint:nofix": "vue-cli-service lint --no-fix"
  },

配置文件-开发环境

#.env.development   
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_BASE_API=/api
#VUE_APP_PORT 后端服务访问地址
VUE_APP_PORT = 'http://192.168.18.200:2222'

配置文件-生产环境

#.env.production   
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_BASE_API=/api
#VUE_APP_PORT 后端服务访问地址
VUE_APP_PORT = 'http://192.168.18.200:2222'

配置文件-测试环境

#.env.test   
NODE_ENV=test
VUE_APP_PREVIEW=true
VUE_APP_BASE_API=/api
#VUE_APP_PORT 后端服务访问地址
VUE_APP_PORT = 'http://192.168.18.200:2222'

使用指令编译production，产生nginx

npm run build:production

使用nginx中的配置

server {
            listen       8800;
            server_name  127.0.0.1;

            location / {
                #alias D:/Code/App1/App/hybrid/html;
                #index index.html;
                #alias E:/work/codecj/start/dist/;
                root   ../dist;
                index index.html;
                add_header 'Access-Control-Allow-Origin' *;
                #允许带上cookie请求
                add_header 'Access-Control-Allow-Credentials' 'true';
                #允许请求的方法，比如 GET/POST/PUT/DELETE
                add_header 'Access-Control-Allow-Methods' *;
                #允许请求的header
                add_header 'Access-Control-Allow-Headers' *;
                #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
                #proxy_pass http://192.168.18.200:2222/;
            }            

            error_page  404              /html/index.html;

            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }

    }
我想要达到的结果

哪位亲最好能远程帮忙看一下，什么时间都可以，详细请私信

vue项目打包后请求不到数据的问题:
需要配置反向代理，因为我们本地开发的时候会出现跨域的问题，需要反向代理来帮我们处理跨域的问题，直接打包的话就会出现问题，请求不到数据，是因为我们打包后的项目根本就不会出现跨域了，因为我们在开发的时候走的是本地8080端口，所有才有跨域。解决方法:
在打包之前要先把我们的反向代理给注释掉，这样才不会出现数据请求出错的问题。
具体参考:
https://m.51sjk.com/b166b272340/

后端有运行起来吗

打开f12看请求地址对不对，在本地请求后端看看通不通

在vue2项目中使用vue-cli-service进行多环境配置的步骤如下:
1.在项目根目录下新建三个环境配置文件，分别是.env.development、.env.test、.env.production
2.在package.json文件中配置打包指令，如 "build:development": "vue-cli-service build --mode development"， "build:test": "vue-cli-service build --mode test"， "build:production": "vue-cli-service build --mode production"
3.在配置文件中配置不同环境下的变量，如 VUE_APP_BASE_API，VUE_APP_PORT
4.在代码中使用process.env.VUE_APP_BASE_API和process.env.VUE_APP_PORT来访问不同环境下的变量
5.使用对应的打包指令进行打包，如 npm run build:production
6.使用nginx配置文件进行反向代理，并设置对应的端口，例如 listen 8800;
7.启动nginx服务，访问对应的地址，如127.0.0.1:8800

注意:

配置文件中的变量名称必须以VUE_APP_开头，才能在代码中使用
在打包的时候，需要在终端中进入到项目根目录，然后执行相应的指令
nginx配置文件中的server_name和location需要根据实际情况进行修改
如果你使用了vue-router，需要在nginx配置文件中配置try_files uri/ /index.html;来保证路由正常工作.

如果是vue的打包文件访问404，就排查一下nginx的配置。
如果是控制台请求接口404，可以考虑排查一下后端接口的服务是否正常