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

Question

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

发生背景（使用技术说明）
使用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;
            }

    }

我想要达到的结果

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

Answer 1

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