升级到Vue2.7中使用可选链?.(2023年最新版踩坑)

原创
2023/02/15 15:33
阅读数 1.6K

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则可以发现编译正常:

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部