已开发的vue3+ts项目需要兼容国产系统uos浏览器(chrome>48)

问题遇到的现象和发生背景

已开发的vue3+ts项目需要兼容国产系统uos浏览器(chrome>48)

遇到的现象和发生背景,请写出第一个错误信息

现在通过vue-cli的浏览器兼容方法在开发环境中低版本浏览器能正常访问,但是在打包之后放回系统就会报错

用代码块功能插入代码,请勿粘贴截图。 不用代码块回答率下降 50%
// .browserslistrc
chrome>48
// .babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
  ],
}
// main.ts
import 'core-js/stable'
import 'regenerator-runtime/runtime'
运行结果及详细报错内容
  1. 在开发环境能正常运行
  2. 打包部署到生产环境之后就报错了,具体错误如下

img

我的解答思路和尝试过的方法,不写自己思路的,回答率下降 60%
  1. 最后是能够解决兼容打包错误;
  2. 如果实在不行,能不能有办法把生产环境按照开发环境(vue-cli-service serve)所生成的文件方式打包,即使文件大一点也没关系,只要能够正常运行及可;
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”

望采纳!!!点击回答右侧采纳即可!!
可能是由于你在配置babel的时候使用了 useBuiltIns: 'entry' 和 corejs: 3 这两个选项,导致在打包后的代码中使用了高版本的JavaScript语法和特性,而在UOS浏览器中不支持这些语法和特性,导致报错。

为了解决这个问题,你可以尝试使用一个不同的配置,例如使用 useBuiltIns: 'usage' 并配合 @babel/polyfill 或 core-js/stable 使用。这样只会在需要时才加载需要的polyfill。


另外,你也可以考虑禁用部分不必要的语法和特性,例如使用 @babel/preset-env 中的 env.exclude 配置来排除不需要的语法或特性。

使用@vitejs/plugin-legacy插件

以上三个方案失败后,我又重新回归到vite这一块,在vite官方文档中我找到了vite自带插件库,并且在插件库中找到了一个关于浏览器兼容支持的插件:@vitejs/plugin-legacy
首先安装插件:npm i @vitejs/plugin-legacy -D

全部内容参考文章:
https://m.jb51.net/article/257717.htm