Laravel使用Vite编译资源时CSS不渲染的问题排查与解决

问题原因分析 #

1. 仅运行php artisan serve时样式不生效 #

• Vite开发模式下，@vite指令默认会请求Vite开发服务器（默认端口5173）的资源，若未启动npm run dev，该服务器未运行，浏览器无法获取编译后的样式。
• public/build目录下的编译文件是npm run build（生产构建）生成的，开发环境（APP_ENV=local）下@vite不会读取这些文件，只会依赖Vite开发服务器。

2. 手动用URL::asset引入编译后CSS出现混合内容错误 #

• URL::asset生成的资源链接协议由项目APP_URL配置决定，若APP_URL为HTTP，而页面通过HTTPS访问，浏览器会阻止HTTP资源加载，触发"Mixed Content"错误。

3. 同时运行php artisan serve和npm run dev时样式正常 #

• 这是Vite开发模式的标准工作流程：Vite开发服务器实时编译资源，@vite指令会自动代理到该服务器，浏览器能正确获取到实时编译的样式文件。

对应解决方法 #

场景1：仅用php artisan serve时让样式生效（适合快速预览生产效果） #

• 执行生产构建命令，生成最新的静态资源：

  npm run build
  

• 修改.env文件，切换到生产环境：

  APP_ENV=production
  

  此时@vite会读取public/build下的manifest.json，直接加载编译好的静态资源，无需依赖Vite开发服务器。

场景2：解决混合内容错误 #

• 更新.env中的APP_URL为HTTPS协议：

  APP_URL=https://your-local-domain.test
  

• 若使用本地HTTPS服务（如php artisan serve --ssl），确保APP_URL与访问协议一致，URL::asset会自动生成HTTPS链接。

场景3：开发环境正常使用（推荐日常开发） #

• 保持同时运行两个命令：

  php artisan serve
  npm run dev
  

  Vite开发服务器会实时监听CSS/Tailwind配置变化，自动编译并推送更新，样式会即时生效，还支持热重载。

额外注意事项 #

• 开发环境不要手动引入public/build下的资源，避免与Vite开发服务器的资源冲突。
• 每次修改Tailwind配置或CSS文件后，生产环境必须重新执行npm run build才能更新样式。

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