Laravel+Vue项目开发环境正常 生产环境Vue组件不显示无控制台报错

1. 优先核查静态资源相关配置 #

• 确认线上.env文件中的APP_URL参数和线上实际域名完全一致，Laravel的asset()、mix()等辅助函数会基于该参数生成静态资源路径，配置错误会导致资源加载失败
• 直接在浏览器地址栏访问打包后的JS入口文件地址（例：https://你的域名/js/app.js），确认返回状态为200且文件内容非空白：
  • 若返回404：检查打包后的public/js、public/css目录下的文件是否完整上传到服务器对应目录
  • 若返回403：检查静态资源文件的权限是否设置为服务器可读取的权限（通常设置为644即可）
• 若项目部署在域名子目录（例：https://域名/项目名/），需要修改vue.config.js中的publicPath配置为对应子目录路径：

  module.exports = {
    publicPath: '/你的子目录名/'
  }
  

  同时修改Laravel配置文件中的APP_URL为带子目录的完整路径，重新打包后上传。

2. 核查Vue挂载逻辑 #

• 确认Blade模板中存在Vue对应的挂载节点，且ID和Vue入口代码中的挂载ID完全一致，避免拼写错误
• 在Vue入口JS文件中增加错误捕获逻辑，排查是否有被静默吞掉的挂载错误：

  // 以Vue3为例，Vue2同理修改挂载逻辑即可
  import { createApp } from 'vue'
  import App from './App.vue'
  
  try {
    createApp(App).mount('#app')
    console.log('Vue挂载成功')
  } catch (e) {
    console.error('Vue挂载报错: ', e)
  }
  

• 可以在Blade模板、Vue入口文件中分别增加console.log测试代码，确认JS资源是否正常执行：
  • 若两处测试日志都未打印：说明JS资源未正常加载，回到第一步排查资源路径问题
  • 若Blade的日志打印、Vue入口日志未打印：说明打包后的JS文件本身存在执行异常，可临时将vue.config.js的productionSourceMap设置为true重新打包，上传后查看控制台具体报错

3. 核查服务端配置 #

• 确认共享托管的站点根目录已经指向Laravel项目的public文件夹，而非项目根目录，否则会导致路径解析异常
• 确认public目录下的.htaccess文件完整存在，伪静态规则配置正确，避免资源请求被Laravel的路由拦截
• 若Vue路由使用了history模式，需要在.htaccess中添加对应的伪静态规则，保证所有前端路由都指向入口index.html

4. 其他验证方案 #

• 本地开启生产模式服务测试：执行npm run production打包后，本地启动Laravel生产环境服务，确认是否能正常渲染Vue组件，如果本地生产模式也有问题，说明是打包配置问题，和服务器无关
• 检查mix-manifest.json（如果用Laravel Mix）文件是否完整上传，文件内的资源路径和实际打包后的路径是否一致

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