vue2.6使用??(空值合并运算符)报错问题

336 阅读1分钟

今天在运行项目的时候,运行不起来,报错内容如下。

image.png 提示需要一个合适的loader来处理这个文件,想了一会儿,也不知道用啥loader。可能是昏了头,没注意到具体的问题地方。发现后,就找到这个文件,将这行代码注释,继续运行,还是报错,再注释一行,依旧报错,但是找到了规律那就是都用了??。

解决办法

  1. npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
  2. 在babel.config.js中添加配置:plugins: [ '@babel/plugin-proposal-nullish-coalescing-operator' ]

image.png 3. 我的报错信息是error in ./node_modules/@svgdotjs/svg.js/dist/svg.esm.js,在vue.config.js中添加相应配置transpileDependencies: ['@svgdotjs']下图小红框所示。

image.png

??介绍

空值合并运算符?? )是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数MDN

let eg1  = null ?? 'str str';
console.log(eg1);
// 输出: 'str str'

let eg2 = 0 ?? 628;
console.log(eg2);
// 输出: 0

配置项:transpileDependencies

是一个数组,根据数组中的值对依赖进行转译。因为有些依赖用到的语法可能比较新,我们的环境不支持,需要用到这个配置来进行转译。