問(wèn)題：使用vue3寫(xiě)的H5網(wǎng)頁(yè)，用Android支付寶打開(kāi)title能顯示，內(nèi)容全是白屏。
推測(cè)：瀏覽器內(nèi)核問(wèn)題;
微信使用騰訊x5內(nèi)核，IOS使用系統(tǒng)瀏覽器內(nèi)核;so,看看Android支付寶APP使用的內(nèi)核是什么.
下拉看到支付寶使用的UC瀏覽器內(nèi)核;
把瀏覽器內(nèi)核檢測(cè)工具 Browser kernel v2.6 測(cè)試查看瀏覽器內(nèi)核版本用二維碼生成，支付寶掃碼進(jìn)入查看瀏覽器內(nèi)核版本;
?瀏覽器內(nèi)核版本是Chrome 69.0.3497.100,發(fā)現(xiàn)用UC瀏覽器打開(kāi)網(wǎng)頁(yè)正常，UC瀏覽器查看內(nèi)核版本，UC瀏覽器的內(nèi)核版本高。so,這期間發(fā)生什么？
找一個(gè)相同版本的內(nèi)核瀏覽器
使用360極速瀏覽器或用Android寫(xiě)一個(gè)webview兼容69版本，以用來(lái)查看為什么顯示白屏;
發(fā)現(xiàn)報(bào)錯(cuò)：
Uncaught ReferenceError: globalThis is not defined
at overlay.ts:140在globalThis - JavaScript | MDN
可以看到chrome71版本才添加了globalThis ，所以報(bào)錯(cuò)未定義。?
解決方式一? 基于vite打包
- npm install?@vitejs/plugin-legacy
- vite.config.ts配置
import legacy from '@vitejs/plugin-legacy'; build: { target: 'es2015', }, plugins:[ legacy({ targets: ['Chrome 69'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'], modernPolyfills: true, }), ] - index.html? ?添加globalThis聲明??
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Vue + TS</title> <script> this.globalThis || (this.globalThis = this) </script> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"> this.globalThis || (this.globalThis = this) </script> </body> </html>使用360極速瀏覽器和支付寶APP測(cè)試打開(kāi)都正常顯示;文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-665489.html
git 地址?h5_vant: vant4+vue,屏幕適配文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-665489.html
到了這里，關(guān)于Vue3+h5項(xiàng)目用Android支付寶打開(kāi)白屏,android微信+IOS微信、支付寶打開(kāi)正常的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
