vue2项目实现兼容chrome69

vue2项目实现兼容chrome69

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

一、安装依赖

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

复制代码

二、入口文件引入

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

1. import 'core-js/stable';
2. import 'regenerator-runtime/runtime';

复制代码

注意：一定要在顶级！在引入vue之前先引入，否则不能语法降级。
三、配置package.json（设置兼容浏览器版本）

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

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

复制代码

或者设置.broswerlistrc文件，但要注意文件和package里该字段不能同时存在，否则会冲突造成无法打包。
四、创建/修改babel.config.js（对兼容进行配置）

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

复制代码

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

1. module.exports = {
3.   transpileDependencies: true, // 对node_modules里的内容也进行语法降级
4.   // transpileDependencies: [
5.   //   'sentence-splitter', // 或者选择强制编译某库
6.   // ],
7.   css: {
8.     loaderOptions: {
9.       postcss: {
10.         postcssOptions: {
11.           plugins: [
12.             require('autoprefixer')({
13.               overrideBrowserslist: ['Chrome >= 69'], //对chrome69以上版本加上-webkit-内核前缀
14.             }),
15.           ]
16.         }
17.       },
18.     }
19.   }
20. }

复制代码

六、打包测试

1. npm run build
2. npx serve

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！