vue-cli@3.0使用Axios插件记录及本地代理配置

vue-cli@2.0版本时，一直在用vueResource，但似乎axios呼声更高。所以vue-cli@3.0决定使用axios试试。
3.0版本的插件安装方式有所改变：vue add xxx
下面按照操作顺序来说：

1.安装axios插件安装及使用

vue add axios

安装成功后，终端提示已更新package.json/package-lock.json/plugins/axios.js等，
最重要的是"./src"下新增文件plugins/axios.js，我们来看下文件内容：

看到这个文件才理解，Vue Cli官网所说“安装和调用“的含义：

这样就好理解了，这里是把原本需要我们手动调用设置的部分，也一块配置了出来
main.js中，我们也无需做其他设置，我们甚至可以直接在这里做基础路径、超时、跨域、拦截器、别名的设置

2.proxy代理设置

代码如下：
vue.config.js中配置(设置的代理地址为117.51.xx.xx)：

请求调用如下：

请求结果如下(发起的请求地址为本地IP172.21.xx.xx，即localhost)：

虽然请求地址是本地ip(localhost),即地址栏对应地址,因为做了代理生效，其实实际请求地址就是117.51.xx.xx
请求是成功的，但是把设置的代理名‘/api’也加在了地址中，这就不知道会引起什么后果了(部署发布以后)

接下来我们就打包部署试试看,部署以后请求，果然不会那么顺利，还是请求的地址栏地址，但是报404

这是为什么呢？不知道~~
于是查了一些开发环境与生产环境下有关代理的一些资料，初步得出一些结论：
首先我们明确做请求代理的意义，开发环境下，我们是为了解决本地开发出现的跨域问题，
然而，这只是对开发环境生效，

生产环境下：请求地址改变，但却不会代理到target所指向服务地址，想要生产环境下不报404，这里提供如下3个办法：

1.打包前修改代理而配置
既然会影响生产环境，就直接打包前把本地代理相关设置去掉，只是打包前多了一个步骤，如果可以接受的话

2.设置前后端地址统一
如果前端服务和后端地址统一(ip和端口)，目的是使生产环境下，代理后的请求地址和原实际请求地址匹配一致，制造一个刻意的巧合，这样也就在开发和生产环境下都作用了

3.后台配合做nginx反向代理
nginx.conf配置文件修改如下：

location /api {
proxy_set_header   Host             $host;
proxy_set_header   x-forwarded-for  $remote_addr;
proxy_set_header   X-Real-IP        $remote_addr;
proxy_pass http://XXX.XX.XX.XXX:XXXX; // 接口地址
}

以此记录，以防后面忘记，如有不妥之处，欢迎指正~

参考博文：
https://blog.csdn.net/wxl1555/article/details/81118668
https://www.2cto.com/kf/201808/774877.html