Babel 转换后 Vue 模板里的可选链语法报错怎么办？

Newb.锦锦提问于 2026-03-24 23:15:19 阅读 3

工具

我在 Vue 项目里用了可选链（?.）语法，本地开发没问题，但打包上线后在低版本浏览器报错。查了下是 Babel 没有正确转换这个语法，但我的配置看起来是对的啊？

这是我在单文件组件里写的代码：

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

<script>
export default {
  data() {
    return { user: null }
  }
}
</script>

我装了 @babel/plugin-proposal-optional-chaining，也加到 babel.config.js 里了，但构建后的代码还是保留 ?.，没转成兼容写法，是不是 Vue 模板里的表达式不会走 JS 的 Babel 转换？

我来解答赞 0 收藏

反馈

1 条解答

开发者春莉 Lv1

代码放这了

Vue 模板里的表达式确实不会走 JS 的 Babel 转换，你需要安装并配置 vue-template-babel-compiler 或者使用 vue-loader 的 transformAssetUrls 配置。不过最简单的办法是升级到 Vue CLI 4 或以上版本，它已经内置了对可选链的支持。

如果你不想升级 Vue CLI，可以试试这个插件：
vue-template-babel-compiler

安装：
npm install vue-template-babel-compiler --save-dev

然后在 vue.config.js 里这样配置：

module.exports = {

  chainWebpack: config => {

    config.module

      .rule('vue')

      .use('vue-loader')

      .tap(options => {

        options.compiler = require('vue-template-babel-compiler')

        return options

      })

  }

}

这样应该就能解决模板里的可选链语法问题了。

2026-03-25 00:01