1.vue项目打包发测后，接见项目链接，功用未见效，革新后才见效。

• 起首，检察两次接见，获取到的文件是不是雷同。检察network，两次接见要求以下，可见两次获取到的app.js不是同一个文件。最先认为是浏览器缓存题目，检察以下材料知悉跟浏览器缓存无关。（浏览器缓存）

• 其次，检察app.js文件是不是加了hash。在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.在vue中运用jsx

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save
//在.babelrc设置
{
  "presets": ["@vue/app","@vue/babel-preset-jsx"]
}

报错：Duplicate declaration “h” (This is an error on an internal node. Probably an internal error.)
解决方法

//在.babelrc设置，删掉"@vue/babel-preset-jsx"
{
  "presets": ["@vue/app"]
}

3.webpack代办题目排查

• 题目形貌：vue-cli3构建的项目，当地开辟环境经由过程webpack中的devserver代办要求到后端效劳，接口A返回以下两种状况，其他接口均一般。但经由过程浏览器url直接接见后端效劳接口A，接口返回200，是能够拿到悉数数据的。

Proxy error: Could not proxy request /xxx/list?pageNo=1&pageSize=10 from localhost:8080 to http://x.x.x.x:8108 (ECONNRESET).

{"code":"200","msg":"要求胜利","success":true,"data":{"total":107,"list":[{...},...,{"id":132,..."name":"账户�Proxy error: Could not proxy request /eventNotifyPerson/list?pageNo=1&pageSize=10 from localhost:8080 to http://172.16.21.237:8108 (ECONNRESET).

• 检察Node.js Error中细致诠释：

ECONNRESET (Connection reset by peer): A connection was forcibly closed by a peer. This normally results from a loss of the connection on the remote socket due to a timeout or reboot. Commonly encountered via the http and net modules.

• 题目排查：

  • 肯定是不是数据有非常：让后端在数据库里删掉id为132的这条数据，发明题目依然存在；
  • 肯定是不是前端代办有题目：后端将顺序宣布到dev环境，前端代办稳定，接口返回200，数据一般。

  • 后端题目排查，wireshark抓包发明http传输，数据包没传输完，衔接就断开了。

  • • 尝试在前端要求头中加Connection: Keep-Alive。一最先尝试在axios要求中加，增加体式格局以下：

      axios.defaults.headers['Connection'] = 'Keep-Alive'

      控制台报错：[图片]
      
      换别的一种体式格局：[图片]
      
      浏览器看到是：Connection: Keep-Alive
      
      但抓包中显现：connection: close，岂非是加的不对，没见效？又参考(axios的api文档),在接口的config中增加，效果照样一样。
      
      查找材料HTTP Keep-Alive形式，发明浏览器keep-alive机制以下：
      
      检察抓包中的http要求是1.1版本，理应会是默许开启keep-alive的，随后找后端确认，本来虽然浏览器发出的时刻，keep-alive是默许开启的，但经由webpack的代办转发，keep-alive被封闭了，代办将这个值设置为了close，随后查找材料，深入分析vue的webpack代办设置：vue.config.js中的devServer.proxy实际运用的是http-proxy-middleware中间件，检察设置项，修正devServer以下：
      
      检察wireshark抓包内容，确认proxy的Connection: Keep-Alive，增加胜利。
      
      再次接见后端接口，接口200，数据一般，题目修复。

  • 开端结论：浏览器会默许开启keep-alive，所以经由过程浏览器url接见能够拿到悉数数据，然则经由webpack的代办转发，keep-alive被关掉了，要在这里设置开启。在接口返回数据量很大的时刻，会碰到这类题目。
  • 题目深思，虽然如许接口一般了，然则在开辟其他项目的时刻，数据量有比这个更大的，在proxy中从来没有加过keep-alive。
  • 再次确认是不是是后端题目：后端把效劳布置到当地的tomcat下，前端代办不加keep-alive，接口返回200，数据一般。
  • 终究结论：本来后端效劳是布置在jetty下，dev环境是布置在tomcat下（听后端专家说：jetty供应的数据包保留在内存中，发送给前端，包还没发完，就被jetty给关掉了，致使抓包中数据丧失；而tomcat会保证数据数据悉数发送给前端，所以dev环境一般），所以会涌现接见后端当地，接口500，接见dev环境接口200，终究确认是后端jetty设置题目致使。