vue-element-admin改用真实后端(python flask)数据的方法

看了很多其他教程，最后总结了这个经验。希望对大家有帮助。
我自己选了vue-element-admin后，希望后端采用python的flask进行服务。
原本想，要用flask驱动vue-element-admin页面。后来研究了一番后，发现：vue-element-admin原生是采用Node.js启动和运行的。
所以，退一步，就是要在服务器上，用Node.js启动vue-element-admin,默认是9258端口。同时用flask启动后端服务，默认是5000端口。
然后修改vue-element-admin中的代码，让它的后端交互功能，转向flask所提供的服务。
这就涉及到修改vue-element-admin的模拟数据接口mock，改用真实后端，同时还设计到，要从9258端口的网站跨站访问5000端口的网站。
这里让我们已“登入”为例。

以登入为例功能为例，理解文档结构

在vue-element-admin中，src目录下的views，找到其中的login，里面的index.vue就是我们的登录页面。
检查代码可以找到，这个流程是
src/views/login/index.vue => src/store/modules/user.js => src/api/user.js => src/utils/request.js
到这里基本就把请求发出了。具体可以参考别人的文章。哈哈哈。

修改配置的方法，只要一步！

request时候，vue-element-admin其实再配置里对请求进行了拦截和代理。相关配置在最外层的vue.config.js文件中，如下。这个proxy:{}中的配置，
这里的[process.env.VUE_APP_BASE_API]，在开发环境下，就是“dev-api”(具体配置在文件 .env.development 里) 。这个代理配置，将所有原本面向http://127.0.0.1:9258/dev-api/* "请求都通过代理的方式转向了“http://127.0.0.1:9258/mock/* ”，这是原本进行模拟数据获取的方式。
那我们需要转向真实后端数据，在127.0.0.1:5000上。只需要向图中一样将，target：后面的内容改为http://127.0.0.1:5000/就可以了。

两个提醒

这里有2个地方要提醒一下：
1.request的设置中，会对所有的通过request进行请求的地址前面，加上dev-api，比如登入，在src/api/user.js 中的 login 方法，好像只请求了 url: ‘/user/login’,实际上，在src/utils/request.js中，在请求地址前面加上了baseURL: process.env.VUE_APP_BASE_API。这个process.env.VUE_APP_BASE_API在开发环境中，就是dev-api。
所以实际请求的地址是“/dev-api/user/login”，再加上前端服务器的域名，实际请求的是 http://127.0.0.1:9258/ dev-api/user/login 。用户再浏览器的控制台看到的，也是这个地址。
2.在vue.config.js中的proxy配置中，结构为：
[process.env.VUE_APP_BASE_API]: {
target: http://127.0.0.1:${port}/mock,
changeOrigin: true,
pathRewrite: {
[’^’ + process.env.VUE_APP_BASE_API]: ‘’
}
}
这配置为，因为process.env.VUE_APP_BASE_API在这里就是"dev-api"，所以，服务器会对所有请求 http://127.0.0.1:9258/dev-api/* 的请求进行代理。
target: 表示代理的目标地址，会被加在请求地址之前。
同时chageOrigin:true，表示允许这个代理跨域。pathRewrite:{ }是重写访问地址。其中是键值对的模式，将地址（路由）中，符合key的匹配规则的部分，会被替换为后面的内容。这里就是把dev-api替换为空了。

好了，就这些了，希望对大家有帮助。