Babel预设配置后Vue组件还是报语法错误？

シ依依提问于 2026-03-19 14:07:19 阅读 6

工具

我用Vue 3写了个组件，本地开发没问题，但打包时Babel报错说不识别可选链操作符（?.）。明明已经装了@babel/preset-env，难道还要额外配什么？

这是我的组件代码：

<template>
  <div>{{ user?.profile?.name }}</div>
</template>

<script setup>
import { ref } from 'vue'
const user = ref(null)
</script>

babel.config.js里也加了preset-env，targets也设了现代浏览器，但构建还是失败。是不是preset没生效？

Babel

我来解答赞 1 收藏

反馈

1 条解答

ლ景源 Lv1

这问题我遇到过，preset-env 配置了但没生效，基本是这两个原因：

1. targets 写得太宽泛

"现代浏览器" 这种描述 Babel 不认，得明确写出要兼容的浏览器版本。改一下：

// babel.config.js

module.exports = {

  presets: [

    ['@babel/preset-env', {

      targets: '> 0.25%, not dead, not ie 11'

    }]

  ]

}

2. 没装 corejs

preset-env 需要 corejs 配合才能正确处理语法转换和 polyfill：

// babel.config.js

module.exports = {

  presets: [

    ['@babel/preset-env', {

      targets: '> 0.25%, not dead, not ie 11',

      useBuiltIns: 'usage',

      corejs: 3

    }]

  ]

}

然后确保安装了 corejs：

npm install corejs@3

如果还是不行，检查下你的构建工具配置是不是用了 esbuild 或其他不做 Babel 转换的插件，有些项目会混用导致冲突。

对了，你用的是什么构建工具？webpack 还是 Vite？

2026-03-19 14:14