(vite/webpack 通用)vue 白屏 Uncaught Syntaxerror: Unexpected token ‘?‘

news/2024/4/24 4:12:03/

如果可以实现记得点赞分享,谢谢老铁~

一、问题的描述

突然收到业务方发来的反馈: 浏览器一片空白,开控制台输出:Uncaught Syntaxerror: Unexpected token ? 这个是语法错误。
在这里插入图片描述

二、 如果是用vite来构建:

如果是用vite来构建的,根据vite官方文档描述,build.target默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 传送,所以需要我们手动兼容低版本

vite代码版本较高,导致低版本浏览器无法运行,结果是他那边浏览器的版本很低(谷歌44)导致的。

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

2.然后配置vite.config.js, 如图

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({plugins: [legacyPlugin({targets: ["chrome < 60", "edge < 15"], // 需要兼容的目标列表,可以设置多个additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要此插件renderLegacyChunks: true,})]
})

3.当你build构建的时候,可能会报错:

Error: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

安装依赖即可:

npm install terser

重新打包、运行到浏览器,则低浏览器不会报错了

三、 如果是用webpack来构建:

需要先下载依赖

npm i @babel/polyfill  @babel/plugin-transform-runtime  @babel/preset-env -D

1.你需要在vue.config.js 里面进行配置:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,configureWebpack:config => {config.entry.app = ["@babel/polyfill","./src/main.ts"]              },
})

2.然后再babel.config.ts 里面进行配置:

module.exports = {presets:[["@vue/app",{polyfills:["es6.promise","es6.symbol","es6.array.iterator","es6.object.assign"],useBuiltIns:"entry"}]]
}

重新打包、运行到浏览器,则低浏览器不会报错了

PS: 亲测谷歌版本 < 50 的,都不支持,以上的均可支持,40+ 版本的请升级版本吧!


http://www.ppmy.cn/news/936277.html

相关文章

花店小程序怎么做

花店小程序的功能介绍&#xff1a; 花店小程序是一款专门为花店设计开发的一款移动应用程序。它提供了丰富多样的功能&#xff0c;方便用户在线浏览、购买和配送鲜花。以下是该小程序的主要功能介绍&#xff1a; 1. 在线浏览鲜花&#xff1a;通过花店小程序&#xff0c;用户可…

模仿炉石传说的金卡效果

我自己没玩炉石传说&#xff0c;不过最近看同事玩&#xff0c;发现他的金卡效果非常的生动&#xff0c;于是研究了一下怎样做的。上面的草薙京就是模拟效果了。 首先说说我自己的做法&#xff0c;最后再说说炉石本身的做法。 这里我准备了几个东西&#xff1a; 1、草薙京原图背…

C语言-抽卡程序

文章目录 一、程序基本思路二、程序实现步骤源代码展示 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、程序基本思路 一般的抽卡系统都有相对应的“爆率”&#xff0c;也就是抽中的概率&#xff0c;这就要求C语言在自主运行中可以实现两个步骤&am…

【英雄联盟动画-双城之战】10点首播!6亿召唤师快来

小伙伴们注意&#xff1a;公众号的推送机制不再按照时间前后推送了&#xff0c;微信公众号信息流乱序。君哥建议大家把科技毒瘤君公众号置顶&#xff08;设为星标⭐&#xff09;&#xff0c;以便第一时间看到推送&#xff0c;非常感谢~&#xff0c;方法如下图&#xff1a; 【英…

MotoGP™ Ignition 热门卡片促销、SHRD、冠军赛等更新即将来袭!你们准备好了吗?

10 月 24 日更新&#xff1a;促销日期已更新为从 10 月 27 日开始&#xff0c;根据社区反馈&#xff0c;印刷编号将随机分配&#xff0c;而不是根据购买订单顺序分配。 MotoGP™ Ignition 粉丝们&#xff0c;我们马力全开&#xff0c;为大家带来一系列新的更新&#xff0c;让我…

卡牌战斗测试

问&#xff1a;你有玩过卡牌类型的游戏吗&#xff1f; 答&#xff1a;玩过一些&#xff0c;这两年一直在玩的卡牌游戏有&#xff1a;皇室战争、炉石传说等..... 问&#xff1a;皇室战争这款游戏如果让你来测试游戏的战斗&#xff0c;你会怎么测试呢&#xff1f;从哪方面着手&…

幸运召唤师链接

http://lol.qq.com/act/a20180224lucky/index.html?e_code399156&area1

Dracoo Master天龙卡牌大师

欢迎各位新老朋友&#xff0c;我们细说P2E&#xff08;Play to Earn&#xff09;&#xff0c;为广大用户提供一个深入了解链游的平台。不定期的跟大家分享一些精品项目和最新链游方向&#xff0c;也欢迎大家关注我们。我们第三十六期分享的是一款真正由社区拥有和管理的卡牌游戏…

ai绘画,初级召唤师教程

前言 novel ai是最近以世界上最大的二次元D站为数据集训练出来的一个ai&#xff0c;所以生成二次元风格图的效果很不错&#xff0c;其他的就一般般了。 我自己生成的图例 声明&#xff1a; 以下内容仅代表个人观点如存在一些问题请联系笔者资源来源于互联网&#xff0c;仅供…

Redis学习(三)持久化机制、分布式缓存、多级缓存、Redis实战经验

文章目录 分布式缓存Redis持久化RDB持久化AOF持久化 Redis主从Redis数据同步原理全量同步增量同步 Redis哨兵哨兵的作用和原理sentinel&#xff08;哨兵&#xff09;的三个作用是什么&#xff1f;sentinel如何判断一个Redis实例是否健康&#xff1f;master出现故障后&#xff0…

阿里云服务器 用docker部署mysql

阿里云服务器上使用Docker部署MySQL 当您在阿里云服务器上使用Docker部署MySQL时&#xff0c;步骤如下&#xff1a; 登录到阿里云服务器&#xff1a;使用SSH工具登录到您的阿里云服务器。您可以使用命令行工具&#xff08;如OpenSSH&#xff09;或可视化工具&#xff08;如PuT…

Kakfa - 多副本架构

文章目录 基本架构Kafka 多副本架构概念优点缺点 图解多副本架构小结 基本架构 Kafka 多副本架构 概念 Kafka 是一个高性能、分布式的消息系统&#xff0c;被广泛应用于各种场景中。在 Kafka 中&#xff0c;多副本架构是保证数据可靠性的重要手段之一。 多副本架构指的是将同…

POI读写excel几万行数据时内存溢出问题,超大文件Failed to read zip entry source

目录 平常的excel读取java.io.IOException: Failed to read zip entry source .POI读写excel几万行数据时内存溢出问题,excel文件大&#xff0c;我的excel 大概在600M&#xff0c;读取有个5分钟左右。主要解决了读取的问题。1. Excel2003与Excel20072. 大批量数据读写2.1 大批量…

go语言终端交叉编译的事项windows编译其它平台软件包

交叉编译的终极版本[以此为准]&#xff1a; windows编译窗口目前分为cmd窗口&#xff0c;powershell窗口&#xff0c;这两个里面运行的命令不一样。 1.cmd窗口编译&#xff1b; 在windows10之前的系统版本上使用cmd命令行可以使用命令 CMD命令行中 在CMD命令行中编译&#…

day06面试题

面试题 1.webpack的打包原理2.如何优化webpack打包速度3.说说webpack中常见的Loader&#xff1f;解决了什么问题&#xff1f;4.说说webpack中常见的Plugin&#xff1f;解决了什么问题&#xff1f;5.说说你对promise的了解6.async函数是什么&#xff0c;有什么作用 1.webpack的打…

惠普鼠标怎么样(2020最新款惠普鼠标测评)

IT之家 9 月 15 日消息 惠普在今年夏天早些时候推出了一款超值的 Omen Vector 有线游戏鼠标&#xff0c;该公司又推出了新的 Omen Vector 无线鼠标&#xff0c;更加高端&#xff0c;售价 99.99 美元&#xff08;约 676 元&#xff09;&#xff0c;今天开始在美国上市。Vector W…

大顶堆或者小顶堆PriorityQueue解决TopK和k个最值问题

1. PriorityQueue用法 容量k&#xff0c;默认为小根堆&#xff0c;即堆顶的元素为堆的最小值。 PriorityQueue<Integer> queue new PriorityQueue<>(K);通过lambdas表达式设置排序方式&#xff0c;这里设置大顶堆&#xff0c;即堆顶的元素为堆的最大值。 Prior…

惠普战X 15 酷睿版 2021怎么样?测评值得买吗?详细性能点评

全新的战采用派克银轻奢商务配色&#xff0c;轻松驾驭各种办公场合&#xff0c;高强度铝合金机身&#xff0c;抗压性更好、强度更高&#xff0c;更耐磨&#xff0c;同时让整机更显质感。采用钻石切割工艺&#xff0c;展现金属光泽。15.6英寸防眩光大屏幕&#xff0c;86%屏占比&…

2023Testing Expo| 怿星科技展品抢先看(第一弹)

8月9日-11日&#xff0c;2023汽车测试及质量监控博览会将于上海世博展览馆1号馆举行&#xff0c;本次展会将展示测试和验证技术在整车、零部件和系统开发领域中的新发展、新产品和新解决方案。怿星科技将携最新的ETH测试、智驾测试、PPS测试等方案亮相测试展&#xff0c;届时欢…

瑞星系统中心服务器地址如何修改,瑞星系统中心安装教程

《瑞星系统中心安装教程》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《瑞星系统中心安装教程(4页珍藏版)》请在人人文库网上搜索。 1、瑞星系统中心安装教程具体安装方法如下&#xff1a;一、卸载系统当前版本的瑞星杀毒软件1、选定要安装系统中心的服务器&#xf…