页面空白源于Vite构建后CSS中静态资源路径失效导致加载404，进而引发Vue/Inertia挂载异常；需先验证CSS是否成功加载，再通过配置assetsInlineLimit:0、publicDir及调整资源路径或使用asset()函数解决。
页面空白是因为 Vite 构建后 CSS 中的图片、字体等静态资源路径失效，导致浏览器加载失败，进而触发 Vue 或 Inertia 的挂载异常或样式崩塌；Laravel 并不接管 Vite 产物中 CSS 内部的相对路径重写，而 Vite 默认将图片转为 base64 或 hash 文件名后，仍按原始 CSS 相对路径引用，最终 404。
确认 CSS 是否真正加载成功
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 CSS 和 Img 类型请求 → 找到你引入的 CSS 文件（如 /build/assets/app.xxxxx.css）→ 点击查看响应内容。如果 CSS 文件返回 404 或内容为空，说明 @vite 指令未生效或 manifest.json 缺失；若 CSS 返回 200 但内部 background: url(./images/logo.png) 类路径报 404，则是资源路径解析问题。
这一步必须做，跳过会导致后续所有排查方向错误。
强制 Vite 在构建时保留原始图片路径结构
默认情况下，Vite 会把 resources/images/ 下的图片打包进 public/build/assets/ 并改名，但 CSS 里写的 url('./images/logo.png') 仍被解析为相对于 CSS 文件的位置，而实际图片已不在该相对路径下。
立即学习“前端免费学习笔记（深入）”；
在 vite.config.js 的 build 配置中添加 assetsInlineLimit: 0，并显式指定 publicDir: 'public'：
复制AI写代码
1 2 3 4 5 6 7 8 9 10 11
export default defineConfig({
publicDir: 'public',
build: {
outDir: 'public/build',
manifest: true,
assetsInlineLimit: 0,
},
plugins: [laravel({ input: ['resources/js/app.js', 'resources/css/app.css'] })],
});
assetsInlineLimit: 0 表示禁用小图 base64 内联，全部输出为独立文件；配合 publicDir: 'public'，Vite 会把 public/ 下原有图片（如 public/images/logo.png）原样复制进 build 目录，CSS 中 url('./images/logo.png') 就能真实命中。
【必须把图片提前放进 public/images/，不能只放在 resources/images/】
重写 CSS 中的静态资源引用方式
方法一：改用 Laravel 的 asset() 函数动态注入路径
不要在 CSS 文件里写 url('./images/logo.png')，改在 Blade 模板中用内联 style 或 data 属性传入路径：
<div class="logo" :style="{ backgroundImage: `url(${ { asset('images/logo.png') } })` }"></div>
Vue 组件中这样写更安全，彻底绕过 CSS 路径解析。
方法二：在 CSS 中使用绝对路径并配合 Vite base 配置
在 vite.config.js 中设置 base: '/build/'，然后把所有图片挪到 public/build/images/，再在 CSS 中写 url('/build/images/logo.png') —— 这样路径始终从根开始，不受当前路由影响。
注意：base 值必须以 / 开头，且和 Nginx 实际映射路径一致，否则 JS 也会加载失败。
验证 CSS 是否被 @vite 正确注入
第一步：检查 Blade 模板中 @vite 是否写在 <head> 最顶部，且参数为数组格式：
@vite(['resources/js/app.js', 'resources/css/app.css'])
第二步：确认 resources/css/app.css 文件真实存在，且不是空文件或仅含注释。
第三步：执行 npm run build 后，打开 public/build/manifest.json，搜索 app.css 对应的键名（如 "resources/css/app.css"），确认其 value 是一个带 hash 的 .css 文件路径，例如 "assets/app.8d3e2f12.css"。
如果 manifest.json 里没有这个键，说明 Vite 插件没识别到该 CSS 入口，@vite 指令就会静默失败，页面无样式也无报错。
