解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題

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

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

問題背景

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

檢查了nginx配置以及web存放位置的對應關系都沒有問題，結(jié)果打開控制臺輸出：Uncaught Syntaxerror: Unexpected token ? 這個很明顯是語法錯誤。

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

問題原因

vite代碼版本較高，導致低版本瀏覽器無法運行

vite項目瀏覽器兼容性

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

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

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

解決辦法

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'], // 需要兼容的目標列表，可以設置多個
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11時需要此插件
    }),
]
})

重新打包、運行到瀏覽器，則低瀏覽器不會報錯了

拓展：Uncaught Syntaxerror: Unexpected token >

其實這個問題很多都是因為我們的代碼版本較高導致了，這里因為是vite項目所以使用這種解決辦法

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

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

總結(jié)

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

您可能感興趣的文章:

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