升级Node.js 14至18后Vue2项目全组件SyntaxError问题求助

问题现象 #

• Vue2项目（Vue 2.7.14 + @vue/cli-service 5.0.8）将Node.js版本从14升级到18（16版本也存在相同问题），最初运行正常，但清理Docker缓存、镜像、容器和卷并重建容器后，所有Vue组件编译时均抛出SyntaxError，错误示例：

ERROR in ./src/views/404.vue?vue&type=template&id=6b3aeb0e& (./node_modules/vuetify-loader/lib/loader.js??ruleSet[1].rules[0].use!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[5]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/404.vue?vue&type=template&id=6b3aeb0e&)
Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
SyntaxError: /opt/application/src/views/404.vue: Unexpected token, expected "," (1:8)

> 1 | [object Promise]
    |         ^
  2 | export { render, staticRenderFns }
    at instantiate (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:63:32)
    at constructor (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:358:12)
    at JSXParserMixin.raise (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:3207:19)
    at JSXParserMixin.unexpected (/Users/dmitrydudin/harlem/chat-home-base/ui/node_modules/@babel/parser/lib/index.js:3237:16)
    ...

• 涉事组件格式合规，例如404.vue为空组件：

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({});
</script>

• 回退至2个月前的代码版本并彻底清理Docker相关内容后，问题依旧。
• 新建Vue2（TS + Webpack）项目，添加以下Eslint+Prettier依赖后触发相同问题：

"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"prettier": "^3.0.1",

已尝试的无效操作 #

• 在package.json的dependencies中显式指定vue-loader: ^15.10.1
• 通过overrides字段强制@vue/cli-service依赖vue-loader 15.x版本，但package-lock.json仍显示vue-loader v17，版本切换无效

解决方案 #

1. 强制锁定vue-loader兼容版本 #

Vue 2.7仅兼容vue-loader v15.x，@vue/cli-service 5.x默认依赖适配Vue3的vue-loader v17，需通过overrides（npm 8.3+）强制锁定：

{
  "overrides": {
    "vue-loader": "^15.10.1",
    "@vue/cli-service": {
      "vue-loader": "^15.10.1"
    }
  }
}

执行命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

若使用yarn，需替换为resolutions字段

2. 降级Eslint+Prettier适配Vue2 #

Prettier 3.x与Vue2工具链存在兼容性问题，降级至兼容版本：

"eslint-config-prettier": "^8.10.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.8.8"

更新后重新安装依赖：

npm install

3. 检查Babel配置兼容性 #

确保Babel配置适配Vue2.7和Node.js 16/18：

• 在babel.config.js中添加官方预设：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
};

• 若使用TypeScript，确认@vue/babel-preset-typescript版本与Vue2.7匹配

4. 清理Docker构建缓存 #

Docker构建时强制重新安装依赖，可在Dockerfile中添加：

RUN rm -rf node_modules package-lock.json
RUN npm install

或构建时使用无缓存参数：

docker build --no-cache -t your-image-name .

内容的提问来源于stack exchange，提问作者dudintv