Vue 2 项目中 template 使用可选链 ?. 导致的诡异编译报错及 webpack loader 配置坑

最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符 ?.。

这让我百思不得其其解------Vue 2.7 明明官方支持 template 中的 ?.，为什么本地环境就炸了？经过几天的定位和排查，终于挖出了根源：vue.config.js 中看似无害的"开发环境优化"配置，悄悄改变了 vue-loader 的处理范围，导致第三方库中的 .vue 组件编译失败。

这是一次非常典型的"优化反成坑"的教训，今天就把整个排查流程和原理梳理出来，希望能帮到遇到类似问题的朋友。

问题现象

项目配置了两个启动脚本：

pnpm run dev：连接测试环境 API，模式为 development。
pnpm run dev:local：连接本地后端，加载本地 .env.local 配置。

在测试环境一切正常，页面渲染也没问题。但本地环境一启动，Webpack 就报错：

javascript 复制代码

ERROR in ./src/views/some-page.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
SyntaxError: /path/to/node_modules/some-lib/components/ImageViewer.vue: Unexpected token ?.

注意：报错栈指向项目 src 中的页面，但实际问题代码在 node_modules 的第三方组件里（比如一个图片预览组件的 template 中用了 v-if="currentImage?.url"）。

更诡异的是：同一个页面，在测试环境不触发报错（因为数据不同，没渲染到图片预览组件）。

初步怀疑与排查过程

先怀疑 Vue 版本 package.json 显示 Vue 是 ^2.6.x，但 pnpm lockfile 实际安装的是 2.7.x。Vue 2.7 官方支持 template 中的可选链，所以版本不是问题。
怀疑是 Vite 配置 一开始以为项目迁到 Vite 了（文件名 vite.config.js），但实际还是 Vue CLI + Webpack（文件名是 vue.config.js）。误导了自己好久。
对比不同环境 发现问题是新改的 vue.config.js 引入的。老版本两个环境都正常，新版本只本地报错。

对比两份 vue.config.js 新版增加了常见的"开发环境优化"：

javascript 复制代码

if (process.env.NODE_ENV === "development") {
  config.performance.hints(false)
  config.resolve.modules.add(resolve("src")).add(resolve("node_modules"))
  config.module.rule("vue").include.add(resolve("src")).end()
  config.module.rule("js").include.add(resolve("src")).end().exclude.add(/node_modules/).end()
}

还加了 filesystem cache 和禁用 splitChunks。

关键验证 注释掉整个开发优化分支（特别是 vue 和 js rule 的 include/exclude），问题立刻消失！逐步恢复，发现罪魁是：
javascript 复制代码
```
config.module.rule("vue").include.add(resolve("src")).end()
```

根因深度分析

这段配置的本意是加速开发：

只让 vue-loader 处理 src 目录下的 .vue 文件，跳过 node_modules（假设第三方库不需要编译）。
同理限制 js-loader（babel）只处理 src。

但它忽略了 Webpack 的依赖解析机制：

当 src 中的页面组件引入第三方 .vue 组件（如 <el-image-viewer> 或其他插件提供的单文件组件）时，Webpack 会递归解析依赖图。
默认情况下，vue-loader 会处理所有 .vue 文件（包括 node_modules 中的），正确编译 template（Vue template compiler 支持 ?.）。
加了 include.only(src) 后，vue-loader 拒绝处理 node_modules 中的 .vue 文件。
这些第三方 .vue 被当成普通文件处理，template 字符串直接暴露给后续 loader 或 JS 解析器。
template 中的 ?.（ES2020 语法）未被正确编译 → SyntaxError。
错误会冒泡到父组件（src 中的页面），所以报错栈指向项目自己的文件，看起来很迷惑。

为什么本地环境更容易触发？

本地后端数据更完整，某些页面会加载图片列表 → 触发 ImageViewer 组件（node_modules 中的 .vue）。
测试环境数据有限，没渲染到该组件 → 不触发编译 → 正常。

项目中具体是哪个库？通过 find node_modules -name "*.vue" | xargs grep "\?\." 找到了一些第三方图片预览插件（非官方 Element UI，原版 Element UI 其实没有 .vue 源码）用了可选链。

教训与最佳实践

优化配置要谨慎验证 网上抄的"开发加速"配置（如限制 loader 范围）看起来美好，但要全场景测试（不同环境、不同数据）。
理解 Webpack loader 作用域 include/exclude 不只影响"目标目录"，还会间接影响依赖链中的文件。