1. 程式人生 > 其它 >浙裡辦app對接H5微應用白屏問題深究

浙裡辦app對接H5微應用白屏問題深究

浙裡辦的app對接自己做的h5頁面會有很多坑點。

首先浙裡辦是政府的一個多整合app,稽核超級嚴格,對接也超級變態,不管前端還是後端,對接起來都很頭痛,存在的諸多bug讓很多人無從下手。幾乎每往下走一步都會有個坑。

比如打包自己vue做的h5專案.到浙裡辦建立應用後臺上傳,打包是官網給打包,自己不用build,但是配置要符合,路徑也要符合,還要新增浙裡辦專用識別的配置json檔案,gbc.json

不過這步相對簡單,只要按照你正常的vue專案去除model的東西外,自己添加個gbc配置檔案傳送後端上傳官網即可

打包成功後,首先面對的就是出現了白屏問題。

白屏問題是絕大部分人都會遇到而且卡點的地方。往上搜索相關問題的資料少之又少,無外乎新增gbc配置,新增 輸出路徑覆蓋之前config配置

"outputPath":"build"。vue專案中對vue.config 配置也做相應更改:更改輸出路徑: //輸出檔案路徑 outputDir:'build', 更改publicPath公共路徑配置: publicPath:"/", 最後發現,還是白屏,最後諮詢官網,也只給出更改路由history 為hash模式。 但是現在都還沒有走到那一步 為什麼呢:首先目前的問題是,按照這種方式下,官方打包後的應用只能夠讀取靜態資源index(包含index.html內容),改完配置後,可以正確的讀取到了index.html相關聯的引入,也就是js指令碼,這個js指令碼才是重點,所有vue的構架工程都在這裡,包括後期的獲取ticket,以及官方所說的更改的路由配置項。 也就是說它讀取不到,讀取不到的原因也不是路徑,路徑引入到,但是卻是空白,開啟控制檯的souer資源路徑除錯發現,index.html有內容,js無內容。 難道還是配置不正確?後面又測試幾版本後還是白屏,最後直接諮詢官方專業人員一個個配置的對才找到問題所在: 新增gbc.json配置項: "entryHTML":"/index.html" vue.config.js 更改為:
  //
部署應用包時的基本URL,如果是生產環境,部署到 /cli-study/dist(這裡是build) 路徑;如果是開發環境,部署到根路徑 publicPath: !debug ? './' : './', // 輸出檔案路徑 outputDir: 'build',