执行npm run prod后Vue项目显示空白页及语法错误求助

问题描述 #

• 本地/开发环境执行npm run watch-poll时站点运行正常
• 执行npm run prod构建生产版本后，站点显示空白页，控制台输出语法错误：

Uncaught SyntaxError: 61 (at vue.js:1:91186)
at jl (vue.js:1:91186)
at hp (vue.js:1:135679)
at Array._p (vue.js:1:136054)
at Ya (vue.js:1:110358)
at vue.js:1:110762
at Ya (vue.js:1:110772)
at Za (vue.js:1:109727)
at Qu (vue.js:1:134032)
at vue.js:1:138722
at vue.js:1:138866

• 已尝试重新安装依赖，且确认id为"app"的元素内无<script>标签
• 使用版本：Vue 3.2.45、npm 8.15.0、Laravel Framework 9.52.16、PHP 8.1.25

可能的修复方案 #

1. 调整Laravel Mix的压缩配置

生产构建的代码压缩可能损坏Vue语法，在webpack.mix.js中修改压缩选项：

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .options({
      terser: {
         extractComments: false,
         terserOptions: {
            compress: {
               drop_console: true,
               // 禁用可能触发语法错误的压缩规则
               unsafe_comps: false,
               unsafe_math: false,
               unsafe_proto: false,
               unsafe_regexp: false
            }
         }
      }
   });

2. 排查Vue模板语法问题

开发环境会忽略部分语法不规范，但生产构建会严格校验：

• 检查所有Vue组件的模板，确保标签闭合、指令语法正确
• 清理模板中未定义的变量、未声明的方法
• 确认未使用Vue3已废弃的API（如$listeners、$scopedSlots）

3. 清理构建缓存

Laravel Mix的缓存可能残留旧文件，执行以下命令清理后重新构建：

rm -rf node_modules/.cache
npm run clean
npm run prod

4. 调整依赖版本排除兼容问题

尝试微调依赖版本，规避特定版本的bug：

• 将Laravel Mix升级到Laravel 9对应的最新v6.x版本
• 将Vue版本调整到3.2.40左右，测试是否为特定版本的问题

5. 校验生产环境资源路径

确认生产环境的资源配置正确：

• 检查mix-manifest.json中的资源路径是否与部署路径匹配
• 确认.env.production中的APP_URL和config/app.php中的url配置正确

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