运行npm run serve启动Vue项目报Module parse failed错误如何解决

当前项目的Babel编译配置不支持ES2020新增的可选链操作符（?.），Webpack编译到src/views/ManageCustomer.vue第97行的this.getData?.rowdata?.length代码时无法识别语法，直接抛出解析失败错误，导致项目启动中断。

• 安装可选链语法编译依赖
  打开项目根目录的终端，执行以下命令安装Babel对应的可选链支持插件：
  npm install @babel/plugin-proposal-optional-chaining --save-dev
• 修改Babel配置
  找到项目根目录下的Babel配置文件（babel.config.js或.babelrc），在plugins数组中新增刚安装的插件配置，参考示例：

  module.exports = {
    presets: [
      '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
      '@babel/plugin-proposal-optional-chaining'
    ]
  }
  

• 清理缓存重启服务
  报错日志显示编译经过了cache-loader，旧缓存会导致新配置不生效，先删除node_modules/.cache目录，再重新执行npm run serve启动项目即可。

如果不想调整Babel配置，直接把目标文件里的可选链语法替换成ES5兼容的写法即可，找到ManageCustomer.vue第97行，做如下替换：

// 原报错代码
if (this.getData?.rowdata?.length > 0) {
  return this.getData;
} else {

// 替换为
if (this.getData && this.getData.rowdata && this.getData.rowdata.length > 0) {
  return this.getData;
} else {

保存文件后开发服务会自动热重载，编译即可正常通过。

内容的提问来源于stack exchange，提问作者Faheem Chowdhury