1. 首先从V2.x版本升级到Vue2.7, 从Vue2.7开始在模板表达式中支持了 ESNext 语法。当配合构建系统使用时,编译后的模板渲染函数将会经过和处理普通 JavaScript 相同配置的 loader / 插件。这意味着如果你为 .js
文件配置了 Babel,这些配置也会应用在单文件组件的模板表达式中。
Vue2.x升级到2.7可以参考官方文档: 迁移至 Vue 2.7 — Vue.js (vuejs.org)
2. 升级完毕后尝试是否可以在vue模板语法中使用?.,如果报错则继续往下看:
检查一下本地构建配置,如 webpack 中的 loader,检查一下其对 /\.js$/
的 babel-loader 配置中的include项:
{ test: /\.js$/, loader: 'babel-loader', // include: path.resolve(process.cwd(), 'src') }
此处配置了 include 限制在 src 目录下后就会无法解析到 sfc 模板中的语法了,因为编译后的 render 函数是在 vue-loader 的 pitcher 处理的模块请求如 -!./lib/babel-loader/index.js??./lib/vue-loader/loaders/templateLoader.js??vue-loader-options!./lib/vue-loader/index.js??vue-loader-options!./test.vue?vue&type=template&id=13429420&scoped=true&
,而 include 的配置如果是字符串如上面的绝对路径,那么匹配的规则是要求以它为开头的,详情可前往 Webpack Module Condition 查阅;
所以注释掉include则可以发现编译正常: