vue2项目实现兼容chrome69

vue2项目实现兼容chrome69

• 项目：vue2+webpack。需要针对360浏览器进行兼容。

• 解决：使用babel解决语法问题（注意babel-polyfill已经废弃，所以引入其包含了其功能的包：corejs和regenerator-runtime,详见 https://juejin.cn/post/7062621128229355528 ），autoprefixer自动给css加前缀确保您的 CSS 样式在不同浏览器中正确显示

一、安装依赖

npm install core-js@3 regenerator-runtime --save
npm install autoprefixer --save-dev

二、入口文件引入

在 main.js 或入口文件顶部添加（因为是全量引入）：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

注意：一定要在顶级！在引入vue之前先引入，否则不能语法降级。

三、配置package.json（设置兼容浏览器版本）

在package.json中设置需要兼容的浏览器

  {
  //...其他字段
  "browserslist": [
    "chrome >= 69",		// 兼容到chrome69版本
    "last 2 versions",	// 对最新两个版本的浏览器进行兼容
    "not dead"			// 不兼容已经废弃的版本
  ]
  }

或者设置.broswerlistrc文件，但要注意文件和package里该字段不能同时存在，否则会冲突造成无法打包。

四、创建/修改babel.config.js（对兼容进行配置）

module.exports = {
  presets: [ // 预设的内容是一些数组，每个数组第一项是插件名，第二项是具体配置
    [
      '@vue/cli-plugin-babel/preset',//   Vue CLI 的babel插件，内部已经集成了@babel/preset-env 配置
      {
        // targets: { chrome: '69' }, // 对内核chrome69兼容 如果package.json写了可以不用写
        // useBuiltIns: 'usage', // 自动检测代码中的 ES6+ 语法，按需引入相关 polyfill（追求最小打包体积的现代项目）
        useBuiltIns: 'entry', // 根据 browserslist 目标浏览器，全量引入所需 polyfill（需要精确控制全局 polyfill 的场景,入口引入时需要在顶级引入）
        corejs: 3, // 使用 core-js@3 版本
        modules: false,// 要强制转换为 CommonJS，则设置为 'commonjs'，如果想保留 ES 模块语法以便 webpack 进行 tree-shaking，则设置为 false
        // sourceType: 'unambiguous' //控制 Babel 解析代码时的模块类型假设
      }
    ]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui', // 按需引入element-ui组件
        styleLibraryName: 'theme-chalk' //指定按需加载的样式文件路径（对应 Element UI 的默认主题样式目录 node_modules/element-ui/packages/theme-chalk）。
      },
      
    ]
  ],
}

plugin 与 preset

babel 将很多的语法转换交给了一个个 plugin 处理，例如 @babel/plugin-transform-arrow-functions 这个插件可以转换箭头函数语法，但是为了不需要手动一个个添加，所以提供了@babel/preset-env，可以理解成 preset 包含了很多 plugin 。所以只需要配置一个 preset 就可以转换成浏览器支持的语法了。而@vue/cli-plugin-babel/preset是一个 vue-cli的babel插件包含了@babel/preset-env.

五、设置vue.config.js

module.exports = {

  transpileDependencies: true, // 对node_modules里的内容也进行语法降级
  // transpileDependencies: [
  //   'sentence-splitter', // 或者选择强制编译某库
  // ],
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('autoprefixer')({
              overrideBrowserslist: ['Chrome >= 69'], //对chrome69以上版本加上-webkit-内核前缀
            }),
          ]
        }
      },
    }
  }
}

六、打包测试

npm run build
npx serve