Laravel 9部署Apache后tailwind.config.js背景图片不显示求助

核心原因 #

你遇到的问题是Tailwind配置的背景图路径和Vite构建后的实际路径不匹配：

• 你在tailwind.config.js中硬编码了路径/public/img/wave.svg，但生产环境中Apache的网站根目录就是项目的public文件夹，这个路径实际会指向不存在的public/public/img/wave.svg；
• Vite构建时捕获到了图片引用，将其打包到public/build/assets目录，但Tailwind生成的CSS类仍然使用旧路径，导致浏览器加载不到正确资源。

解决方案 #

方法一：让Vite自动处理图片（推荐） #

这种方式让Vite负责图片的打包和路径管理，避免手动维护路径：

1. 将public/img目录下的图片移动到resources/img目录；
2. 修改tailwind.config.js中的backgroundImage配置为相对路径：

   backgroundImage: {
       'waves': "url('../img/wave.svg')",
       'top-waves': "url('../img/top-wave.svg')",
   }
   

3. 重新执行npm run build，Vite会自动将图片打包到public/build/assets，并同步更新CSS中的背景图路径。

方法二：保留图片在public目录，修正路径 #

如果想维持图片在public/img的位置，只需修正路径配置：

1. 修改tailwind.config.js中的路径，去掉多余的public前缀（因为Apache已将public设为网站根）：

   backgroundImage: {
       'waves': "url('/img/wave.svg')",
       'top-waves': "url('/img/top-wave.svg')",
   }
   

2. 确保生产环境的public/img目录下存在这两张图片（通过git pull同步）；
3. 重新执行npm run build生成正确的CSS类。

额外检查项 #

• 确认Apache的DocumentRoot已指向项目的public目录，否则根路径映射会出错；
• 检查config/livewire.php中的asset_url配置，若手动设置了该值，需确保它指向正确的网站根URL，避免影响静态资源加载。

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