更新時間:2020-06-02 14:52:43css
測試偶爾會出現這個問題,遂提出一個bug
,從bug
字面意思來看,有一個js
的塊加載失敗了。丟失了一個${domain}/js/chunk-${hash}.js
。html
爲何會丟失?前端
爲何會偶發?vue
同類問題git
Vue項目中出現Loading chunk {n} failed問題的解決方法github
本文大量引用了17khba在點擊切換路由的時候,有時候會報錯的回答。vue-cli
前提:部署方式爲刪除上一次構建的資源文件,替換成新的打包文件。docker
bgt78d
的資源不見了,但此時用戶的
index.html
模板中仍是記錄的
bgt78d
的資源地址
index.html
,因此老的
index.html
中的 chunk 信息生效
上面也提到了刷新頁面,可是僅僅捕獲到錯誤就刷新,極可能出現死循環,由於瀏覽器或者相似於Nginx
緩存設置的緣由,瀏覽器不必定每次刷新去獲取新的index.html
。 因此結合重試次數和重試間隔來重試會比較好npm
/static/js/balabal.[hash].js
,如今
/[version]/static/balabal.[hash].js
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:github.com/SunSeekerX
我的博客:yoouu.cn/
我的在線筆記:sunseekerx.yoouu.cn/