vuecli中配置 es2020 可选链操作符 ?.和空值合并??兼容

1.安装插件：@babel/plugin-proposal-optional-chaining 和 @babel/plugin-proposal-nullish-coalescing-operator

可选链?.

npm install  @babel/plugin-proposal-optional-chaining --save

yarn add @babel/plugin-proposal-optional-chaining

空值合并 ??

npm install  @babel/plugin-proposal-nullish-coalescing-operator --save

yarn add @babel/plugin-proposal-nullish-coalescing-operator

2. 在.babelrc 或babel.config.js中  的 plugins中添加 @babel/plugin-proposal-optional-chaining

module.exports = {
    plugins: [
        '@babel/plugin-proposal-optional-chaining',  // 可选链 ?.

        '@babel/plugin-proposal-nullish-coalescing-operator' // 空值合并 ??
    ]
}

3.使用方法

let obj = {}
let a = obj ?. user?. name ?? '张三' // 张三
 
let obj = {
    user: {
        name:'李四'
    }
}
let a = obj ?. user?. name ?? '张三' //李四

4. vue版本兼容 

当安卓完成之后发现还是一直报错，不能够使用的时候请降低 @babel/plugin-proposal-optional-chaining 的版本号，切换版本

npm install  @babel/plugin-proposal-optional-chaining@7.13.12 --save

yarn add @babel/plugin-proposal-optional-chaining@7.13.12