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
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]