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

php_yt發表於2021-07-26
APPH5

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

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

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

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

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

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

Route::get('h5/{flug?}','TestController@h5');

以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

相關文章