快捷導(dǎo)航

解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問題

更新時(shí)間：2024年03月21日 09:28:28 作者：吃炸雞的前端

這篇文章主要介紹了解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問題背景

在開發(fā)環(huán)境一直沒有問題，但是到了生產(chǎn)環(huán)境，上線了顯示白屏。

檢查了nginx配置以及web存放位置的對(duì)應(yīng)關(guān)系都沒有問題，結(jié)果打開控制臺(tái)輸出：Uncaught Syntaxerror: Unexpected token ? 這個(gè)很明顯是語法錯(cuò)誤。

但是在生產(chǎn)環(huán)境能使用，于是趕緊讓同事檢查了瀏覽器版本，結(jié)果是他那邊瀏覽器的版本很低(谷歌76)導(dǎo)致的。

問題原因

vite代碼版本較高，導(dǎo)致低版本瀏覽器無法運(yùn)行

vite項(xiàng)目瀏覽器兼容性

vue3打包后在低版本瀏覽器或webview中出現(xiàn)白屏，原因就是因?yàn)檎Z法兼容問題。

根據(jù)vite官方文檔描述：

build.target默認(rèn)支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 傳送，所以需要我們手動(dòng)兼容低版本。

解決辦法

1.首先安裝插件：npm i @vitejs/plugin-legacy -D

2.然后配置vite.config.js

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目標(biāo)列表，可以設(shè)置多個(gè)
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11時(shí)需要此插件
    }),
]
})

重新打包、運(yùn)行到瀏覽器，則低瀏覽器不會(huì)報(bào)錯(cuò)了

拓展：Uncaught Syntaxerror: Unexpected token >

其實(shí)這個(gè)問題很多都是因?yàn)槲覀兊拇a版本較高導(dǎo)致了，這里因?yàn)槭莢ite項(xiàng)目所以使用這種解決辦法

如果你這邊的vue2項(xiàng)目，或者是react項(xiàng)目，那么可以使用babel-polyfill。

具體的步驟可以搜索一下，大差不差！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號(hào)碼自動(dòng)按3-4-4分割功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue使用@include或@mixin報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了vue使用@include或@mixin報(bào)錯(cuò)的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
案例實(shí)操vue事件修飾符帶你快速了解與應(yīng)用
這篇文章主要介紹了vue常見的事件修飾符,在平時(shí)無論是面試還是學(xué)習(xí)工作中都會(huì)經(jīng)常遇到的,本文就帶你快速上手,需要的朋友可以參考下
2023-03-03
element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded的解決辦法,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
Vue.$set 失效的坑問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑問題發(fā)現(xiàn)及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-07-07
vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
解析vue.js中常用v-指令
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧
2021-10-10
vue router demo詳解
這篇文章主要為大家詳細(xì)介紹了vue router demo演示代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10