1.vue项目打包测试后，访问项目链接，功能未生效，刷新后生效。首先检查两次访问获取的文件是否相同。查看网络，两次访问请求如下，可见两次获取的app.js不是同一个文件。一开始以为是浏览器缓存的问题，后来查了下资料发现和浏览器缓存无关。（浏览器缓存）其次，检查hash是否添加到app.js文件中。在build/webpack.prod.conf.js中可以看到js文件中添加了chunkhash，css文件中添加了contenthash，js和css缓存都没有问题。（webpack三种hash的区别）最后查看index.html文件是否被缓存，看到html文件中的app.js文件还是导入的旧hash文件。解决方案：由于服务器缓存问题，存在缓存，因为缓存了index.html，导致浏览器无法加载最新的js。解决方法是让运维配置删除index.html的缓存。(讨论缓存问题)2.使用jsxnpminstallinvue@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props--save//Configurein.babelrc{"presets":["@vue/app","@vue/babel-preset-jsx"]}Error:Duplicatedeclaration"h"(Thisisanerroronainternalnode.probablyinternalerror.)解决方案//在.babelrc中配置，delete"@vue/babel-preset-jsx"{"presets":["@vue/app"]}3.排查webpack代理问题说明：vue-cli3搭建的项目，本地开发环境是通过webpack的devserver将请求代理到后端服务，接口A返回如下两种情况，其他接口正常。但是如果直接通过浏览器url访问后端服务接口A，接口返回200，就可以拿到所有数据。代理错误：无法代理请求/xxx/list?pageNo=1&pageSize=10从localhost:8080到http://x.x.x.x:8108(ECONNRESET)。{"code":"200","msg":"Therequestwas成功”，“成功”：真，“数据”：{“总计”：107，“列表”：[{...}，...，{“id”：132，...“名称”：“Account.Proxyerror:Couldnotproxyrequest/eventNotifyPerson/list?pageNo=1&pageSize=10fromlocalhost:8080tohttp://172.16.21.237:8108(ECONNRESET)详见Node.jsError:ECONNRESET(Connectionresetbypeer):连接被对等方强行关闭。这通常是由于超时或重启导致远程套接字上的连接丢失。通常通过http和net模块遇到。故障排除：确定数据是否正确异常：让后端删除数据库中id为132的数据，发现问题依然存在；判断前端代理是否有问题：后端将程序发布到dev环境，前端agent不变，接口返回200，数据正常。后台排查，wireshark抓包发现http传输，数据包还没传输就断开了连接。尝试在前端请求头中添加Connection:Keep-Alive。一开始，我尝试将其添加到axios请求中。添加方式如下：axios.defaults.headers['Connection']='Keep-Alive'控制台报错：[图片]另一种方式：[图片]浏览器看到是：Connection:Keep-Alive但是抓包显示：connection:close，是不是添加错了没有生效？参考（axiosapi文档）在接口的config中添加，结果还是一样。查找HTTPKeep-Alive模式的资料，发现浏览器的keep-alive机制如下：查看抓包中的http请求是否为1.1版本，默认开启keep-alive，然后查看跟后台确认，虽然浏览器发送的时候默认开启了keep-alive，但是经过webpack代理转发后，keep-alive被关闭了。proxy设置这个值关闭，然后查找资料，深入分析了vue的webpack代理设置：在vue.config.js中的devServer.proxy其实是使用了http-proxy-middleware中间件，查看配置项，修改devServer如下：查看wireshark抓包内容，确认代理的Connection:Keep-Alive，添加成功。再次访问后台接口，接口200，数据正常，问题解决。初步结论：浏览器默认会开启keep-alive，所以你可以通过浏览器url访问获取所有数据，但是经过webpack代理转发后，keep-alive是关闭的，需要在这里设置。当接口返回的数据量很大时，就会遇到这个问题。反思问题，这个接口虽然正常，但是在开发其他项目的时候，数据量比这个大，一直没给proxy加上keep-alive。再次查看是否是后端问题：后端将服务部署到本地tomcat，前端agent没有加keep-alive，接口返回200，数据正常。最终结论：原来后端服务部署在jetty下，dev环境部署在tomcat下（听后端高手说：jetty提供的数据包存储在内存中发送给前端，在发送包之前，jetty发送是关闭的，导致抓包中数据丢失；而tomcat会保证所有数据发送到前端，所以dev环境是正常的），所以会有访问后端本地，接口500，访问dev环境接口200，最后确认是最后jetty配置问题导致的。
