vue打包部署后 瀏覽器緩存問題，導致控制台報錯ChunkLoadError: Loading chunk failed的解決方案

一、報錯如下：

  每次build打包部署到服務器上時，偶爾會出現前端資源文件不能及時更新到最新，瀏覽器存在緩存問題，這時在當前頁面進行按鈕點擊等事件處理時，控制台報錯chunk load error，如下顯示：

 原因：通過查看當前sources里的文件，可以發現：控制台報錯提示中所請求的js文件哈希值跟sources緩存的文件哈希值並不一樣，說明 當前頁面請求了緩存，然而由於資源文件被更新 導致找不到 出現404的情況。

直接解決辦法：清除瀏覽器緩存。（但是每次部署 都要讓用戶重新清一次緩存不是很友好）下面通過其他方式解決這個問題。

二、解決：

1、在index.html入口文件處設置meta標簽，清除頁面緩存。

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

PS：各字段值詳解（貼鏈接）：

https://www.cnblogs.com/laneyfu/p/9467784.html

淺談http中的Cache-Control

但是這種方法貌似沒什么作用，並沒有解決我的問題

2、vue.config.js文件中配置，給每次打包的文件名后面添加一個哈希值，以供瀏覽器區分。

const timeStamp = new Date().getTime();
module.exports = {
    publicPath:"/",
    configureWebpack: { // webpack 配置
    output: {
      // 把應用打包成umd庫格式
      library:'myLibrary',
      // 輸出重構  打包編譯后的文件名稱  【模塊名稱.時間戳】
      filename: `[name].${timeStamp}.js`,
      libraryTarget:'umd',
      globalObject:'this',
    },
  },
}

這樣每次打包出來的js文件都不一樣，也就解決了瀏覽器的緩存問題。