如何在 Laravel + Vite 项目中正确引用 CSS 中的背景图片-php教程-PHP中文网

如何在 Laravel + Vite 项目中正确引用 CSS 中的背景图片

在 Laravel + Vite 构建环境中，直接在 CSS 中使用 url("/assets/back.png") 会导致开发时请求错误端口（Vite 的 5173），因 public 目录资源未被 Vite 处理；正确做法是将图片纳入 Vite 资源管道，通过 @/ 别名导入并由 Vite 统一解析和哈希。

在 laravel + vite 构建环境中，直接在 css 中使用 `url("/assets/back.png")` 会导致开发时请求错误端口（vite 的 5173），因 public 目录资源未被 vite 处理；正确做法是将图片纳入 vite 资源管道，通过 `@/` 别名导入并由 vite 统一解析和哈希。

在 Laravel 中集成 Vite 后，CSS 文件（如 /resources/css/app.css）默认由 Vite 处理，但 Vite 不会自动解析 CSS 中以 / 开头的绝对路径（例如 url("/assets/back.png")）。这类路径会被浏览器直接解析为当前服务地址（开发时是 http://localhost:5173/assets/back.png），而非 Laravel 的 http://localhost:8000/assets/back.png，从而导致 404。

✅ 正确方案：将图片移入 Vite 的模块化资源体系
将图片放入 resources 目录下（如 resources/images/back.png），然后在 CSS 中使用基于 Vite 别名的相对路径：

/* resources/css/app.css */
body {
  background-image: url('@/images/back.png'); /* ✅ Vite 会自动解析并处理 */
}

Vite 会：

开发时：将 @/images/back.png 解析为 /assets/back.[hash].png 并托管于 Vite dev server（端口 5173），同时确保路径可访问；
构建时：自动复制、哈希重命名并输出到 public/assets/，最终生成类似 background-image: url("/assets/back.abc123.png"); 的生产代码。

⚠️ 注意事项：

确保 vite.config.js 中已配置别名（Laravel 默认已包含）：

Laravel Creem Agent

Creem 支付商店助理 — 查询订阅、客户、交易、产品，执行心跳检查，管理本地 Laravel支付商店。

下载

// vite.config.js（Laravel 默认配置）
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [laravel(['resources/css/app.css', 'resources/js/app.js'])],
  resolve: {
    alias: {
      '@': '/resources', // ✅ 默认已存在，支持 '@/images/xxx'
    },
  },
});

不要将图片留在 public/assets/ 并在 CSS 中硬写 /assets/back.png —— 这绕过 Vite 构建流程，失去 HMR、哈希缓存失效等优势，且开发环境跨端口失效；
若必须保留 public/assets/ 结构（如需 CDN 直链），可改用内联方式（如 JS 动态设置 style），但不推荐用于基础样式。