Vue CLI执行npm run build报Syntax Error但实际代码无异常如何解决

报错显示的异常代码是编译器解析代码错位后生成的错误片段，不是你的实际编写代码，问题出在代码解析阶段发生了语法上下文错位，常见原因及对应解决方法如下：

• 存在未闭合的语法标记

这是最高发的原因，当文件中出现未闭合的模板字符串（`）、多行注释（/*）、HTML标签（.vue文件中template/script/style标签未正确闭合）、括号时，编译器会把后续的代码全部放在错误的语法上下文中解析，最终转译出完全不符合预期的代码片段，触发语法报错。
排查方法：检查报错指向文件的所有前置代码，重点确认所有反引号、注释、标签、括号是否正确配对闭合，也可以尝试临时注释掉报错位置前后的其他代码，缩小错误范围。

• Babel转译配置/插件异常

如果使用了未适配当前项目语法版本的Babel插件、或者babel-loader配置错误，也会导致代码转译时语法变形。
解决方法：检查babel.config.js或.babelrc配置，确认所有Babel插件版本和Vue项目版本兼容，也可以先回退最近修改的Babel相关配置验证。

• 构建缓存损坏

webpack、babel的本地缓存损坏时，会直接读取错误的缓存代码参与构建，和实际编写的代码不一致。
解决方法：依次执行以下操作清除缓存后重新构建：

rm -rf node_modules/.cache
rm -rf dist
npm run build

如果还是报错，可以删除整个node_modules文件夹和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install安装依赖后再构建。

• SFC编译器版本不匹配

如果是Vue项目，@vue/compiler-sfc（Vue3）或vue-template-compiler（Vue2）的版本和Vue核心库版本不一致时，会导致单文件组件解析错误。
解决方法：确认package.json中Vue核心库版本和对应SFC编译器版本完全一致，比如Vue2.x的项目必须使用对应2.x版本的vue-template-compiler，Vue3.x的项目必须使用和vue版本号完全相同的@vue/compiler-sfc。

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