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中加入这段代码后就可以了,页面可以运行在谷歌低版本浏览器上了。

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

你可能感兴趣的:(工作学习总结,浏览器,vue,vue3项目浏览器兼容性问题,vite项目浏览器兼容性问题,低版本浏览器兼容性问题,解决低版本浏览器兼容性问题)