Laravel部署生产环境时Vite仍引用开发服务器5173端口的问题

关键排查与修复步骤 #

1. 同步Vite配置与@vite指令的资源列表
   你的vite.config.js仅配置了app.css和app.js作为编译入口，但Blade的@vite指令还引用了custom.css和custom.js。Laravel Vite插件只会编译配置中声明的入口文件，未配置的文件会导致Vite无法识别生产环境资源路径，进而 fallback 到开发服务器地址。
   修改vite.config.js的input数组，加入所有需要编译的资源：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: [
                   'resources/css/app.css',
                   'resources/css/custom.css', // 新增自定义CSS
                   'resources/js/app.js',
                   'resources/js/custom.js', // 新增自定义JS
               ],
               refresh: true,
           }),
       ],
   });
   

   重新执行npm run build完成全量编译。

2. 验证编译产物是否生成
   确认服务器的public/build目录存在，且包含assets子目录及带哈希后缀的编译文件。如果该目录不存在，检查npm run build的执行日志，排查编译错误（比如依赖缺失、资源路径异常）。

3. 确保生产环境配置生效
   确认服务器.env文件的环境配置正确：

   APP_ENV=production
   APP_DEBUG=false
   

   执行以下命令清除所有缓存，避免旧配置干扰：

   php artisan config:clear
   php artisan view:clear
   php artisan route:clear
   php artisan optimize:clear
   

4. 处理hot文件与资源缺失问题
   开发环境生成的hot文件（项目根目录下）会强制Vite使用开发服务器，生产环境必须删除。删除后页面崩溃说明编译资源存在问题：

   • 检查public/build下的资源是否完整
   • 确认@vite指令引用的资源与编译后的哈希文件名匹配

5. 检查插件版本兼容性
   你的laravel-vite-plugin版本为^0.7.2，Laravel 10推荐使用^1.0+版本的插件，版本不兼容可能导致环境判断异常。可尝试更新插件：

   yarn add laravel-vite-plugin@latest --dev
   

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