devServer.proxy 实现分环境部署？？？

devServer.proxy 实现分环境部署？？？
大佬：？？？这是什么鬼需求
我：啊？不是要分环境搞域名吗？？
一番查阅后…
我：？？？域名根本就不是我写的，换域名和我什么关系？这难道不是后端代理换掉域名就好了嘛？
大佬：你知道代理的原理？？
我：。。。不知道

devServer.proxy ？

作用：

1.解决在开发环境时的跨域问题
2.解决有多个域名的情况(如下图，有项目的域名，还有一个百度地图的域名）

原理：参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求!

4. 

！！！当部署（npm run build）之后，以上设置无效！

这个时候会有俩种情况：

1. 在请求时，有加上baseURL：上线之后请求的域名就是你这里设置的域名
   
2. 没有设置baseURL：也就是你一整个项目，域名放置的地方只有vue.config.js文件里的 devServer.proxy。
   
   这个时候，请求的域名就是根据环境变化的
   

分环境部署域名

知道了部署之后域名是怎么处理的，要实现分环境就容易了。

方法1. 根据不同的环境设置好域名，在请求时将域名拼接上

大概是这样式，网上教程还蛮多的
要是遇到了一个跨域问题，用devServer.proxy浅解决一下：
1.在环境文件里，再加上一行

    VUE_APP_BASE_API = '当前环境域名'

2.用老方法动态设置一下（其实感觉也不用，写死就好了）

方法2. 让域名根据环境自行修改，前端只负责本地域名

1. 这个方法，非常省心，只要域名和请求的域名一致就好了
2. 而且可以实现多个域名的需求，一旦在请求时将接口名统一设置了，就不用玩了
3. 就是说，不用做任何事情，你负责好本地开发时的跨域问题就好了，分环境？让后端自己换域名就行了。
4. ！！！问题在于，第一点说的域名和请求域名，并不一致？那肯定得改呀！

• 不一致类型一：
  http://177.09.13.121:8889 和 http://baidu.com
  这这这肯定不能根据环境让他自己改，那只能是？在请求时设置好域名了；
  至于，有多个域名怎么办，只能想想办法，分情况设置域名了
  （给个思路，溜了）
• 不一致类型2：
  http://baidu.com 和 http://baidu.com/pop
  域名还是原来的域名，但是请求多了一个，/pop
  解决：根据环境，像添加/api一样，再给接口添加一个/pop

细节

1. 环境区分代码？

export function setEnv(){
    if (process.env.NODE_ENV === 'development'){
        //serve 开发环境
        console.error("开发环境", location.host);

    }else{
        // 第二层if，根据域名判断是生产环境还是测试环境
        if(location.pathname.startsWith('/pro')){//pro根据实际情况，我这边是上线的链接有/pro
            console.error("上线环境");
            setLalEnv(true);//本地存储
            return;
        }else{
             console.error("测试环境");
        }
    }
    setLalEnv(false)
}

2. 什么时候调用获取环境的函数？
   调用时间，不可以放在app.vue 请求的顺序太慢了，可以放在要使用的文件中调用
   

3. getLalEnv是做什么的，
   getLalEnv是用于获取本地存储的lalEnv，以获得当前环境
   

4. 为什么要用本地存储，不用vuex
   因为在js文件加载的时候，vuex还没有被实例化，取不到值。

我：搞定了！
大佬： 这么简单的问题都搞那么久？？？