彙總遇到的問題

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配置問題致使。