更新時間:2020-06-02 14:52:43
測試偶爾會出現這個問題,遂提出一個bug
,從bug
字面意思來看,有一個js
的塊加載失敗了。丟失了一個${domain}/js/chunk-${hash}.js
。javascript
爲何會丟失?css
爲何會偶發?html
同類問題Vue項目中出現Loading chunk {n} failed問題的解決方法前端
本文大量引用了17khba在點擊切換路由的時候,有時候會報錯的回答。java
前提:部署方式爲刪除上一次構建的資源文件,替換成新的打包文件。git
bgt78d
的資源不見了,但此時用戶的index.html
模板中仍是記錄的bgt78d
的資源地址index.html
,因此老的 index.html
中的 chunk 信息生效上面也提到了刷新頁面,可是僅僅捕獲到錯誤就刷新,極可能出現死循環,由於瀏覽器或者相似於Nginx
緩存設置的緣由,瀏覽器不必定每次刷新去獲取新的index.html
。
因此結合重試次數和重試間隔來重試會比較好github
構建的時候靜態資源路徑帶上版本信息,這個有不少方法web
/static/js/balabal.[hash].js
,如今/[version]/static/balabal.[hash].js
部署的時候不用頂替部署,而是保留老版本,有不少方式,好比vue-cli
PS.若是不想暴露 version,能夠把 version 作一個 hash 或者混淆
查看Vue-cli配置文檔,
assetsDir
- Type:
string
- Default:
''
放置生成的靜態資源 (js、css、img、fonts) 的 (相對於
outputDir
的) 目錄。提示
從生成的資源覆寫 filename 或 chunkFilename 時,
assetsDir
會被忽略。
只須要給assetsDir
設置一個版本號文件夾,每次發佈新版的時候,不刪除這個文件夾就行。能夠選擇性的保留最近幾回版本的靜態資源文件。
使用 npm 版本號管理進行配合。
${app}/vue.config.js
const { version } = require('./package.json') module.exports = { // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。 assetsDir: `./${version}`, ... }
打包命令加上--no-clean
。做用是不清除上次打包生成的dist
目錄。
vue-cli-service build --no-clean
問題到這裏基本已經解決了,不過仍然出現了一些能夠優化的地方。好比我沒有清除上次打包的dist
目錄,若是在${app}/public
目錄下引入的一些靜態資源後期版本已經刪除了,因爲咱們沒有刪除dist
目錄,不須要的資源仍然存在部署的服務器上。、
若是有很好的方案歡迎指出或者討論。謝謝你的閱讀~💗
SunSeekerX,前端開發、Nodejs開發、小程序、uni-app
開發、等等
喜歡探討技術實現方案和細節,完美主義者,見不得bug
。
Github:https://github.com/SunSeekerX
我的博客:https://yoouu.cn/
我的在線筆記:https://sunseekerx.yoouu.cn/