解决:Vue2项目在低版本浏览器上不兼容问题

一、前言

  • 最近有个需求,开发的项目要求兼容火狐52.3
  • 由于浏览器版本太低,vue2项目地址在浏览器上打不开,出现网页空白,无法使用的情况

二、兼容处理

1、安装babel插件
shell 复制代码
npm i @babel/plugin-transform-arrow-functions -D

# 该插件的主要作用是将箭头函数转换为普通函数
shell 复制代码
npm i @babel/plugin-proposal-optional-chaining -D

# 该插件的主要作用是兼容可选链操作符
2、配置
  • babel.config.js 文件中配置:
js 复制代码
module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3,
        targets: {
          ios: "8",
          android: "4",
          chrome: "58",
        },
      },
    ],
  ],
  plugins: [
    "@babel/plugin-transform-arrow-functions", // 箭头函数转换
    "@babel/plugin-proposal-optional-chaining", // 可选链(?.)转换
  ],
};
  • main.js 文件顶部配置
javascript 复制代码
// 兼容处理引入 === start
import "core-js/stable";
import "regenerator-runtime/runtime";
// 兼容处理引入 === end

import Vue from "vue";
import App from "./App.vue";
...

参考链接

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript