技術(shù)：vite+vue3.2+ts+element-plus

開發(fā)環(huán)境沒有問題，但是打包后的代碼放到正式環(huán)境，頁面空白...

現(xiàn)場(chǎng)的小伙伴發(fā)來報(bào)錯(cuò)問題?

Uncaught SynntaxError：Unexpected token ?

納尼，這這這...什么原因，一頭霧水

用火狐瀏覽器訪問，沒有報(bào)錯(cuò)，開始狂擺...時(shí)間一點(diǎn)點(diǎn)流逝，全網(wǎng)沒有找到解決方法....

猜測(cè)谷歌瀏覽器版本問題，測(cè)試了90版本，頁面出來了！用戶用的瀏覽器大部分是65和70的，太老了吧

定位到問題就好辦了！換關(guān)鍵詞搜索“vite低版本瀏覽器兼容問題”，果然很多人遇到問題

問題分析：

瀏覽器內(nèi)核版本太低，導(dǎo)致用瀏覽器打開，會(huì)出現(xiàn)白屏。該語句是ES6的新語法，一般瀏覽器都沒有問題，但低版本的瀏覽器無法解析該語句，所以要進(jìn)行js轉(zhuǎn)換，一般的vue2項(xiàng)目我們會(huì)使用babel，但vite里不好使用babel，需引入另一個(gè)插件，他可以把指定文件轉(zhuǎn)譯成目標(biāo)文件，如ts->js，話不多說，貼代碼。
?

目標(biāo)文件是vite.config.ts，首先要引入該文件

安裝

npm install @vitejs/plugin-legacy -D

npm add -D terser //這個(gè)一定得安裝，不然打包會(huì)報(bào)錯(cuò)

必須安裝Terser壓縮器，因?yàn)椴寮?em>Legacy，使用Terser進(jìn)行壓縮，不壓縮，整個(gè)包會(huì)大2Mb

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
? plugins: [
? ?? ?vue(),
? ? legacy({
? ? ? targets: ['defaults', 'not IE 11'],
? ? }),
? ],
}

配置完，重新打包繼續(xù)測(cè)試，內(nèi)網(wǎng)的70瀏覽器已經(jīng)可以打開，可是65還是不行！

考慮讓用戶直接升級(jí)瀏覽器，好像不現(xiàn)實(shí)，只能默默的解決65的問題

本地下載65的瀏覽器測(cè)試起來，果然一個(gè)報(bào)錯(cuò)?globalThis is not defined

ap.vue 中添加

?<script>
? ? !(function (t) {
? ? ? function e() {
? ? ? ? var e = this || self;
? ? ? ? (e.globalThis = e), delete t.prototype._T_;
? ? ? }
? ? ? "object" != typeof globalThis &&
? ? ? ? (this
? ? ? ? ? ? e()
? ? ? ? ? : (t.defineProperty(t.prototype, "_T_", {
? ? ? ? ? ? ? configurable: !0,
? ? ? ? ? ? ? get: e,
? ? ? ? ? ? }),
? ? ? ? ? ? _T_));
? ? })(Object);
? </script>

果然完美解決頁面空白的問題?。?/p>

雖然可以打開頁面了，但是同樣控制臺(tái)還是報(bào)了一堆的錯(cuò)誤

修改了?vite.config.js 的配置

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
? plugins: [
? ?? ?vue(),
? ? legacy({
? ? ? targets: ['defaults', 'not IE 11'],

??????additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11時(shí)需要此插件
? ? ? modernPolyfills: true
? ? ? // polyfills: ['es.object.values', 'es.array.flat-map']
? ? }),
? ],
}

完美解決，控制臺(tái)白白凈凈?。?！

?參考文章：

vite + vue3 + ts 安裝 @vitejs/plugin-legacy 兼容舊版瀏覽器 - vue3 項(xiàng)目實(shí)戰(zhàn)vite項(xiàng)目低版本瀏覽器兼容性問題_vite 兼容性_紫軒閣的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-483726.html

到了這里，關(guān)于vite項(xiàng)目低版本瀏覽器兼容性問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！