Laravel Vite部署至虚拟主机后静态资源无法加载的配置问题

问题根源是Vite的资源基础路径配置未匹配生产环境部署路径，同时Laravel的环境变量未设置正确的生产域名，导致构建后资源链接指向了本地开发服务器（127.0.0.1:5173）。按以下步骤修复：

• 修改Vite配置文件（vite.config.js）
  在配置中添加base选项，根据你的虚拟主机部署路径设置：

  • 若项目部署在域名根目录（如http://your-domain.com/），设为'/'
  • 若部署在子目录（如http://your-domain.com/laravel-project/），设为'/laravel-project/'
    示例代码：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/admin.css', 'resources/js/app.js'],
              refresh: true,
          }),
      ],
      // 生产环境用部署路径，开发环境保持默认
      base: process.env.APP_ENV === 'production' ? '/your-deploy-path/' : '/',
  });
  

  如果你确定生产环境的固定路径，也可以直接写死（比如base: '/laravel-project/'），避免环境变量判断出错。

• 调整Laravel环境变量（.env）
  更新APP_URL为虚拟主机的实际访问域名，同时确保APP_ENV设为生产环境：

  APP_URL=http://your-real-domain.com
  APP_ENV=production
  

  部署前要确认虚拟主机上的.env文件是这个配置，不要用本地开发的.env。

• 清理冗余文件并重新构建

  • 删除项目根目录下的public/hot文件（如果存在）：这个文件是开发模式下的热重载标记，生产环境存在会强制Laravel指向本地开发服务器地址。
  • 重新执行npm run build，确保构建后的资源路径是正确的。
  • 上传时务必完整上传public/build目录，不要遗漏里面的资源文件。

• 确认模板指令
  你已经使用的@vite(['resources/css/admin.css', 'resources/js/app.js'])是正确的，无需修改，Laravel会自动根据Vite配置生成生产环境的资源链接。

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