部署Laravel Vite(Vue)网站后空白页及ERR_CONNECTION_REFUSED错误求助

1. 修正.env文件的APP_URL配置 #

• 部署服务器的.env文件中，APP_URL必须设置为你的实际生产域名（如https://your-domain.com），不能保留localhost或[::1]。Vite会基于该地址生成资源引用路径，错误的配置会导致页面请求本地开发服务器。

2. 确认构建产物完整上传 #

• 执行npm run build后，项目根目录会生成public/build文件夹，包含编译后的JS、CSS及资源文件。需确保该文件夹完整上传至托管服务的public目录，无文件遗漏。
• 若使用自动化部署流程，需确认流程包含npm install && npm run build步骤，避免跳过构建直接上传源码。

3. 检查blade模板的Vite引用 #

• 主blade模板（如resources/views/app.blade.php）必须使用Laravel官方的@vite指令，禁止硬编码开发环境地址：

  <!-- 正确写法 -->
  @vite(['resources/js/app.js'])
  
  <!-- 错误写法（需移除） -->
  <script type="module" src="http://[::1]:5173/@vite/client"></script>
  

  生产环境下，@vite指令会自动替换为public/build下的资源路径，而非指向本地开发服务器。

4. 清理缓存 #

• 执行Laravel缓存清理命令：

  php artisan config:clear
  php artisan cache:clear
  php artisan view:clear
  

• 清除浏览器缓存或使用无痕模式访问，避免加载旧的缓存资源。

5. 验证Vue实例挂载逻辑 #

• 打开resources/js/app.js，确认Vue实例挂载代码无环境限制，且目标DOM元素存在：

  import { createApp } from 'vue';
  import App from './App.vue';
  
  // 确保此行代码在生产环境正常执行
  createApp(App).mount('#app');
  

• 检查页面中是否存在<div id="app"></div>元素，缺失该元素会导致Vue无法挂载，开发者工具也无法检测到实例。

6. 检查静态资源访问权限 #

• 确认托管服务允许访问public/build目录下的文件，部分服务需配置静态资源访问规则，或调整文件权限（一般设为755/644）。

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