Laravel 10+Vue2+Apache2热重载与反向代理配置故障求助

环境信息 #

• 服务器：Digital Ocean Ubuntu实例，运行Apache2
• 技术栈：Vue2（前端）、Laravel10（后端），二者部署在同一服务器
• 认证方案：Auth0实现SSO，认证地址为 mylogingscreen.mydevsite.com/auth0login?etc
• SSL配置：通过Certbot生成并配置
• 实时通信：Laravel Echo基于Webpack运行，可按需更换构建工具

当前需求 #

实现前端开发热重载功能，访问 https://mylogingscreen.mydevsite.com 时能实时看到代码修改效果。当前生产环境需手动编译前端文件并复制到Laravel的 /public/ 目录，开发阶段需要优化该流程。

现有配置 #

vue.config.js 关键配置 #

devServer: {
    allowedHosts: "all",
    client: {
      webSocketURL: 'auto://0.0.0.0:0/ws'
    },
}

Apache 完整站点配置 #

<VirtualHost :80>
    DocumentRoot /var/www/laravel/public
    ServerAlias mylogingscreen.mydevsite.com 

    
    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
  
    RewriteEngine On
    RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
    RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
    RewriteRule . ws://echo:6001%{REQUEST_URI} [P]
    

    ProxyPass /socket.io http://echo:6001/socket.io
    ProxyPassReverse /socket.io http://echo:6001/socket.io

    <Directory /var/www/laravel>
        Require all granted
        AllowOverride All
    </Directory>
   RewriteCond %{SERVER_NAME} =mylogingscreen[OR]
   RewriteCond %{SERVER_NAME} =mylogingscreen.mysite.com 
   RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

问题现象 #

执行 yarn serve 后首页可正常加载，但所有涉及后端接口的操作均无响应，且页面会自动刷新。

请求帮助 #

考虑过以下优化方向，恳请给出具体解决建议：

• 保留Webpack用于Laravel Echo，将Vue构建工具切换为Vite
• 替换Apache为Nginx

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