vue3.0+vite项目如何解决低版本浏览器兼容性

最近开发了一个PC端的新项目，这个项目要嵌入到之前一个老的后台管理系统里面。因为客户使用的谷歌浏览器版本比较低，又不愿意做升级处理，所以只能由我们来做低版本浏览器的兼容性处理（无奈，有些新技术想用又不能用）。所以我总结一下vue3.0+vite项目的低版本浏览器的兼容性处理。

1、安装babel/polyfill及其相关依赖

解决低版本浏览器（谷歌浏览器66.0版本）的兼容性问题，说白了就是低版本浏览器不支持最新的语法，所以要把最新的语法转换成低版本浏览器能够识别加载的老语法。那些版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码。

npm install --save @babel/polyfill
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill

2、在main.js当中引入，注意：一定要在最上面第一行

import "@babel/polyfill"; //(一定要在最上面，第一行)
import Es6Promise from "es6-promise";
Es6Promise.polyfill();
import {
    
     createApp } from "vue";
import router from "@/router";
import store from "@/store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import {
    
     createPinia } from "pinia";
const app = createApp(App);
app
  .use(store)
  .use(ElementPlus)
  .use(router)
  .use(createPinia())
  .mount("#app");

3、新建babel.config.js文件

module.exports = {
    
    
  presets: [
    [
      "@vue/app",
      {
    
    
        useBuiltIns: "entry",
        polyfills: ["es6.promise", "es6.symbol"],
      },
    ],
    [
      "@babel/preset-env",
      {
    
    
        modules: false,
        useBuiltIns: "entry",
        corejs: 2,
      },
    ],
  ],
};

4、在package.json文件browserslist配置

	"browserslist": [
	    "> 1%",
	    "last 2 versions",
	    "not ie <= 11"
	  ]

5、创建.babelrc文件与vite.config.js同级

{
    
    
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

结果

按照上面的步骤配置好之后，本地开发环境是正常的，但是打包部署在测试环境上之后，就报错了。

报错信息如下：
Uncaught SyntaxError: Unexpected token ?

无法解析 ??
??是es6中的语法，所以还是兼容性没做好。

怎么能解决这个问题呢？我又开始尝试其他方案了。

首先说一下哈，上面加的代码我没有删除，然后又添加的下面的解决方案。

6、解决方案

在vite.config.js中配置浏览器的兼容性。
我们项目是用vite搭建的，因此我首先想到了使用vite自带的API去配置浏览器兼容性。
配置build.target和buid.cssTarget

build: {
    
    
  target: ['chrome52'],
  cssTarget: ["chrome52"],
}

我在vite.config.js中加入这段代码后就可以了，页面可以运行在谷歌低版本浏览器上了。

至此浏览器兼容性问题算是解决了