Vuejs浏览器缓存和加载块失败问题

Posted 2023-02-22

【中文标题】Vuejs浏览器缓存和加载块失败问题

【英文标题】：Vuejs browser caching and loading chunk failed issue

【发布时间】：2020-04-10 15:07:03

【问题描述】：

我有一个 VueJS 应用程序。已经在一个浏览器选项卡中打开了我的网站。

现在，在运行 npm run build 进行一些更改后，我正在为我的应用构建新版本，这将创建一组新的 dist/* 文件。

现在我正在服务器上部署这个新版本（删除旧版本之后）并访问我的应用无需刷新页面。此时应用程序试图从服务器上不再存在的早期版本构建加载文件（可能来自浏览器缓存）。所以它给了我错误，如下图所示。

当我刷新页面或尝试在浏览器的新标签中打开时，它会加载新代码没有问题。

Please click here to show image

【问题讨论】：

我遇到了同样的问题。你有没有找到解决方案？

【参考方案1】：

这是我能找到的最佳答案。从https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58得到这个

它的要点在你的路由器代码中，放

router.onError(error =>    

    if (/loading chunk \d* failed./i.test(error.message) && navigator.onLine) 
        window.location.reload()
    

); // onError

我添加了在线检查。他确实警告说，如果块真的不存在，这可能会让你陷入无限循环......

如果这不起作用，您可能还需要添加更多全局错误处理程序。当这种情况发生时，我遇到了路由器文件丢失的问题。

// Note: This is for when the Vue error handler doesn't kick in, otherwise, handled by the vue error handler.
            window.onerror = function(mMsg, mSource, mLineNo, mColNo, error)
                // mMsg = Char. Error Msg: i.e. "Uncaugh SyntaxError: Unexpected token '<'"
                // mSource = Char. i.e. 'https://yoursite.com/js/chunk-431587f6.ff603bf5.js'
                // mLineNo = Numeric. Line no
                // mColNo = Numeric. Col no
                // error = Object. Error object        
                if (mMsg.toLowerCase().indexOf("unexpected token '<'") >-1)
                    // this happens when a new update gets applies but my router.js file hasn't been pulled down for whatever reason. A page refresh fixes it. 
                    // mSource = 
                    if (navigator.onLine)
                         window.location.reload();
                    
                

            ; // window.onerror