vue兼容低版本chrome

红太狼 2023-10-07 20:17 76阅读 0赞

做项目遇到了一些不能轻易升级chrome版本的客户，他们还用着40版本的chrome，所以今天就来说说为了兼容低版本的chrome做了哪些努力。![ce0892758cc8403eb277713b6cda04a6.png][]

![15e97347b07e4d85b1cfd94ca4c1c633.png][]

主要是两件事情：

（1）将自己代码转为es5版本  
（2）将node\_modules中引用的插件，有需要的部分转为es5版本

#### 转自己的 ####

配置自己的代码我们需要用到一个新的插件`babel-polyfill`

（1）安装

由于这个需要在你的源码之前使用，我们需要将其安装为dependency而不是dev-dependency。

npm install --save @babel/polyfill

（2）使用

vue.config.js

module.exports = {
      pages: {
        index: {
          // add here ---start---
          entry: ['node_modules/babel-polyfill/dist/polyfill.js', 'src/main.js'],
          // add here ---end---
          template: 'public/index.html',
          filename: 'index.html',
          chunks: ['chunk-vendors', 'chunk-common', 'index'],
        },
      },
    };

更多使用请看官方文档

（3）配置

新增babel.config.js文件

将所需要使用的polyfill配置出来

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

#### 转node\_modules下指定插件 ####

vue.config.js  
新增配置

transpileDependencies: ['your dependency'],

[ce0892758cc8403eb277713b6cda04a6.png]: https://img-blog.csdnimg.cn/ce0892758cc8403eb277713b6cda04a6.png
[15e97347b07e4d85b1cfd94ca4c1c633.png]: https://img-blog.csdnimg.cn/15e97347b07e4d85b1cfd94ca4c1c633.png