Laravel项目中@vite Blade指令无法正常生效如何解决

你贴出的tailwind.config.js和vite.config.js配置本身没有错误，Vite可以正常编译资源说明前端构建链路是通的，指令未被解析、直接原样输出到页面是后端Blade引擎未识别该指令导致，按以下优先级排查修复即可：

• 检查Laravel框架版本
  @vite是Laravel 9.19.0版本才内置的Blade指令，如果你当前项目的Laravel版本低于该版本，框架不会注册该指令解析逻辑，会直接把@vite(...)当普通文本输出。
  修复操作：

  1. 执行composer命令升级框架到最低要求版本：

  composer require laravel/framework:^9.19
  

  2. 升级完成后清理缓存：

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

  这是9.x版本从Mix迁移到Vite时最常见的问题，大部分人卡在这里都是因为框架版本没到要求的最低线。

• 检查Mix残留服务冲突
  因为你是从Laravel Mix逐步迁移，如果你之前在config/app.php的providers数组中手动注册过Mix的服务提供者，残留的配置可能和Vite的资源解析逻辑冲突。
  修复操作：

  1. 打开config/app.php，找到providers数组中Laravel\Mix\MixServiceProvider相关条目，暂时注释移除
  2. 重新执行上文提到的缓存清理命令即可。

• Homestead环境适配配置
  Homestead虚拟机环境下需要给Vite加对应的server配置，否则开发模式下可能出现指令解析后资源加载异常的问题，修改vite.config.js如下：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel([
              'resources/css/app.css',
              'resources/js/app.js',
          ]),
      ],
      server: {
          host: '0.0.0.0',
          port: 5173,
          hmr: {
              host: '你在Homestead中配置的项目访问域名'
          }
      }
  });
  

  注意Vite开发服务需要在Homestead虚拟机内部执行npm run dev启动，不要在宿主机直接运行。

修复完成后刷新测试页面，查看网页源码，如果@vite位置正常生成了对应CSS的link标签和JS的module脚本标签，就说明功能恢复正常，生产环境执行npm run build后指令会自动加载构建后的带hash的静态资源。

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