uniapp的h5專案更版出現白屏的問題解決辦法

php_yt 發表於 2021-07-26

uniapp開發的H5站點,做了一些改動重新編譯,部署上去替換線上專案,出現白屏。

通過幾次編譯後的js檔名稱互相對比,部分js檔名稱並沒有因為重新編譯而改變,我認為是靜態js、css快取造成的。

我的解決方案,是後端處理。每次編譯後的專案命名不同的名稱。

uniapp的h5專案重新編譯出現白屏的問題解決辦法

編譯時的 manifest.json 中的執行的基礎路徑(js的執行路徑)填寫為 h5v2,然後編譯,編譯後在unpackage/dist/build/下生成了 h5 的資料夾,重新命名為 h5v2,然後將其上傳至伺服器。

接下來是後端,由一個統一的路由指向不同的資料夾,於是完成了版本的切換。

Route::get('h5/{flug?}','[email protected]');

以laravel為例

public function h5($flug=''){
        \View::addExtension('html','php');

        // 通過切換 index.html 的路徑完成了版本的切換
        // $indexhtml = public_path().'/h5v1/index.html';
        $indexhtml = public_path().'/h5v2/index.html';

        if(!file_exists($indexhtml)){
            return '網頁不存在';
        }
        return  view()->file($indexhtml);
}

由於manifest.json中填寫的 h5v2,所以 js 路徑是/h5v2/..js,js路徑變了,所以快取問題解決了。而且專案的路徑並沒有變,因為路徑是 Route::get('h5.. 後端路由命名的。

本作品採用《CC 協議》,轉載必須註明作者和本文連結
focus