说说自己搭建vue cli3 + element ui 的前端工程的经历吧，所遇到的问题 以及集成方面。
由于种种原因，前端的活也得兼容，实在无法忍受JSP了，恰好上面让重构 xx的Web，（原因太丑）。
boss : 听说你会Vue又想 前后分离是吧, 那你来搭建并部署吧。
我： ？？？？ 放下后台，拿起我 的40m 大刀 ，早已经 按捺不住了。
终究工作归工作，走向更好而不是 破罐子破摔，毕业设计 是自学了vue做的, 知道分离的好处，来吧，一些前人的优秀框架。
毕业设计时参考 vue-element-admin，半天被劝退，找了个简单的做完毕设。
工作一年多了之后，虽然没怎么接触前端，但是回头再看 vue-element-admin 发现满满都是精髓， 工程结构分明，组件功能明确…省略 n的指数 个字的夸奖吧。
但其组件对于我来说还是相对复杂些，不能直接拿来改，于是磨刀霍霍向用过的相对简单的一套。
明确自己要的东西及问题：
- 国际化
- 路由侧边栏
- 跨域Cookie问题（为什么不用唯一令牌，遗留问题）
发现vue-element-admin 的路由 及 左侧栏加载 做法比我那套好万倍！TagsView也不错，面包屑用得很灵性，icon-svg也很nice， 国际化刚好我要的，真香。
三两下将自己简单的vue项目 瞬间高大上了。感谢 panjiachen 的开源，让我一个后端仔也能快速集成这些功能。
最后一个遗留问题了 ，跨域Cookie问题, 因为不同源， 所以无法取到后台的cookie。在封装的axios 的请求配置中 ， 拦截返回的信息，打印头信息，视图取到cookie, 尝试了很多办法 终无果。
service.interceptors.response.use(// HTTP Status Coderesponse => {// debuggerconsole.log(response.headers)// service status codeconst res = response.data;.....}
);
输出
{connection: "close", content-disposition: "inline;filename=f.txt", content-type: "application/json;charset=UTF-8", date: "Tue, 14 Jul 2020 07:01:17 GMT", server: "Apache-Coyote/1.1", …}
connection: "close"
content-disposition: "inline;filename=f.txt"
content-type: "application/json;charset=UTF-8"
date: "Tue, 14 Jul 2020 07:01:17 GMT"
server: "Apache-Coyote/1.1"
transfer-encoding: "chunked"
x-powered-by: "Express"
就是没有set-cookie。
寻寻觅觅啊，都想打出跪求两个字眼了 ，找了大半天的，最后发现不同源cookie无法获取~ 都已经想要把后台改成令牌模式了，要不是急着出东西。
好吧，一开始就想着让登录接口显示返回cookie, 就是放在data里直接传过来，自己设置就好， 最后发现这个, 在 vue.config.js下 （基于vue cli3）
module.exports = {// baseUrl: '/',publicPath: '/',assetsDir: 'static',productionSourceMap: false,devServer: {host: '0.0.0.0',port: 8091,// publicPath: '../',// 设置代理proxy: {"/api": {target: "http://自己的ip/项目名/",// target: " ", // 跨域访问ws: true, // 是否启用websocketschangOrigin: true, //开启代理secure: false, // 将安全设置为false,才能访问https开头的pathRewrite: {'^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可},//解决跨域引起的session问题，这段代码改变cookie 的作用于为 path="/"onProxyRes(proxyRes, req, res) {var oldCookie = proxyRes.headers['set-cookie']if (oldCookie == null || oldCookie.length == 0) {delete proxyRes.headers['set-cookie']return}var oldCookieItems = oldCookie[0].split(';')var newCookie = ''for(var i=0; i < oldCookieItems.length; ++i){if(newCookie.length >0)newCookie += ';'if(oldCookieItems[i].indexOf('Path=') >= 0)newCookie += 'Path=/'elsenewCookie += oldCookieItems[i]}proxyRes.headers['set-cookie'] = [newCookie]}},},},}
另外还需要在 统一配置 axios的地方加上, 我直接两个地方都加上了，可以去掉其中一个withCredentials ，自行尝试。
axios.defaults.withCredentials = trueconst service = axios.create({baseURL: '/api/',withCredentials: true, timeout: 5000 // request timeout
});
作为后端仔，理解核心就够了
（withCredentials = true）： 用于让 axios可携带cookie, 因为默认不携带。
（改变cookie 的作用于为 path="/",） 让作用域同源。
无非就是将服务端带来的SESSIONID 返回去，即使配置了上面的做法，仍然是得不到session, 但是不难看出 反向代理 将set-cookie 设置到Cookie里面去了（通过修改 path="/",亲测可用。
今天不学习，明天变辣鸡。