Laravel Vite静态资源处理：开发与构建环境适配问题求助

图片资源修复 #

你当前用import.meta.glob(['../images/**'])是懒加载批量导入，Vite开发模式下不会主动处理未被实际调用的资源，导致dev环境下图片仅在build后可用。可以二选一调整：

• 方式1：立即导入所有图片
  替换为globEager，强制Vite在dev模式下处理所有图片资源：

  // app.js
  import.meta.globEager('../images/**');
  

• 方式2：按需导入+模板引用
  在需要使用图片的文件中直接导入，比如：

  // app.js 或组件文件
  import someImage from '../images/someimage.jpg';
  

  blade模板中保持原引用方式即可：

  {{ Vite::asset('resources/images/someimage.jpg') }}
  

字体资源修复 #

将字体放在public/fonts会导致dev模式下Vite服务器无法正确托管，改为让Vite接管字体处理：

1. 移动字体目录
   把public/fonts移到resources/fonts下。

2. 修改CSS引用路径
   用相对路径指向resources下的字体，让Vite捕获资源：

   @font-face {
     font-family: "Bebas Neue Pro";
     src: url('../fonts/bebas_neue_pro/bebas_neue_pro.otf') format("opentype");
   }
   

3. Tailwind配置保持不变
   你的字体配置无需修改，依然可以正常生效：

   theme: {
     extend: {
       fontFamily: {
         sans: ["Bebas Neue Pro", 'sans-serif'],
         "Bebas Neue Pro": ["Bebas Neue Pro"],
       },
     },
   },
   

验证 #

修改后执行npm run dev，图片无需提前build即可加载，字体也不会出现404错误；执行npm run build后资源依然正常工作。

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