Laravel 8集成JetStream与LiveWire项目Tailwind样式不渲染问题

故障表现 #

#

修复步骤 #

• 完成前端资源编译
  Jetstream默认不会自动生成可访问的CSS、JS静态资源，安装完成后需在项目根目录依次执行以下命令完成前端依赖安装和资源编译：

  npm install
  npm run dev
  

  生产环境部署可替换为npm run prod生成压缩优化后的静态资源。
• 修复编译环境兼容问题
  若执行npm命令过程中出现报错导致无编译产物生成，优先校验Node.js版本：Laravel 8 配套的前端编译工具对14.x~16.x版本的Node.js兼容性最佳，使用更高版本可能出现依赖兼容错误，可切换对应Node.js版本后重新执行编译命令。
• 校验资源引入配置
  打开resources/views/layouts/app.blade.php全局布局文件，确认两处资源引入配置正确：
  1. 页面头部引入CSS资源：

  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  

  2. 页面底部引入JS资源：

  <script src="{{ mix('js/app.js') }}" defer></script>
  

  不要将mix()辅助函数替换为asset()，否则无法正确加载带哈希后缀的编译资源。
• 修正站点路径配置
  1. 打开项目根目录下的.env文件，确认APP_URL参数与实际访问的站点域名完全一致，本地开发示例：APP_URL=http://localhost:8000
  2. 若站点部署在域名子目录下，需在webpack.mix.js中添加资源根路径配置，示例：

  mix.setResourceRoot('/你的站点子目录路径/')
  

  配置修改后需重新执行npm run dev编译资源。
• 清理缓存
  完成上述操作后仍未生效的话，依次执行以下命令清理框架缓存，同时清理浏览器本地缓存后再访问即可：

  php artisan view:clear
  php artisan cache:clear
  

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