问题
vue项目需要考虑浏览器兼容,太烦了
解决
项目基于 vue-cli3
vue-cli3 对浏览器支持配置挺友好,只需要指定兼容浏览器或版本。项目默认使用 @vue/babel-preset-app ,它通过
@babel/preset-env
和browserslist
配置来决定项目需要的 polyfill,节省包大小。
默认情况下,它会把
useBuiltIns: 'usage'
传递给@babel/preset-env
,这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。
// babel.config.js
// 默认设置
module.exports = {
presets: [
'@vue/app',
'@babel/preset-env
]
}
// 明确指定
module.exports = {
presets: [
'@vue/app',
[
'@babel/preset-env,
{ 'useBuiltIns': 'usage' }
]
]
}
复制代码
package.json browserslist
配置
{
"browserslist": [
"defaults",
"not IE < 10",
"maintained node versions"
]
}
复制代码
.browserslistrc
文件配置
# Browsers that we support
defaults
not IE < 10
maintained node versions
复制代码
更多 browserslist 配置规则查看 这里
其它框架
- 按照 babel-polyfill
npm install babel-polyfill --save-dev
复制代码
2、在main.js 引用 babel-polyfill
// main.js
import 'babel-polyfill'
复制代码
3、修改webpack,entry配置
module.exports = {
entry: {
app: ['babel-ployfill','./src/index.js']
}
}
复制代码
其他兼容(留言补充)
1、flex 样式兼容
// 定义样式 flex: 1 0; 通常省略第三参数 flex-basis,默认 auto
// 但是
// ie浏览器,flex-basis 默认值是0
// 需要手动指定
// 所以项目需要兼容ie
// flex 样式最好写完整,如 flex: 1 0 auto;
复制代码