Laravel 11：如何在视图中引用resources目录下的资源？

问题原因说明 #

• HTML::script报错：Laravel 11 默认移除了 Laravel Collective HTML 组件，该类不再内置，且官方已不推荐使用这类扩展，转而建议使用原生 Blade 语法或 Vite 工具链。
• asset()/url()返回404：resources目录不属于 Web 服务器的可访问根目录（Web 根目录是public），直接通过 URL 访问其中的文件自然会返回404。

正确解决方案（推荐使用 Vite） #

Laravel 11 默认集成了 Vite 作为前端构建工具，这是官方推荐的资源管理方案，既能保留resources目录作为开发源码目录的合理性，又能实现资源的编译、压缩和版本控制。

1. 配置 Vite 入口

打开项目根目录下的vite.config.js，将你的资源文件添加到input数组中：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/main.css',
                'resources/js/main.js',
                'resources/media/logo.jpg', // 媒体文件也可加入编译流程
            ],
            refresh: true, // 开发环境自动刷新页面
        }),
    ],
});

2. 安装依赖并编译资源

在终端执行以下命令：

# 安装前端依赖（首次执行）
npm install

# 开发环境编译（实时监听文件变化）
npm run dev

# 生产环境编译（压缩、版本化资源）
npm run build

3. 在视图中引入资源

使用 Laravel 提供的@vite指令，自动引入编译后的资源：

{{-- 同时引入 CSS 和 JS --}}
@vite(['resources/css/main.css', 'resources/js/main.js'])

{{-- 单独引入媒体文件（编译后会自动复制到 public 目录）--}}
<img src="{{ asset('media/logo.jpg') }}" alt="网站Logo">

备选方案：手动复制资源到 public（不推荐） #

如果你不想使用构建工具，也可以手动将resources/css、resources/js、resources/media中的文件复制到public目录对应路径下，之后就能通过asset()正常访问：

<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<script src="{{ asset('js/main.js') }}"></script>
<img src="{{ asset('media/logo.jpg') }}" alt="Logo">

但这种方式无法实现资源压缩、版本缓存等优化，仅适合简单项目。

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