Laravel Blade中Vite资产加载指南：解决模块化项目中的404错误-js教程-PHP中文网

Laravel Blade中Vite资产加载指南：解决模块化项目中的404错误

花韻仙語

发布： 2025-10-30 20:48:01

原创

558人浏览过

Laravel Blade中Vite资产加载指南：解决模块化项目中的404错误

本文旨在解决laravel blade模板中，尤其是在模块化项目中，使用vite加载javascript和css资源时遇到的404错误。我们将深入探讨传统方法失效的原因，并详细介绍如何通过laravel提供的`@vite` blade指令正确地集成和管理vite处理的资产，确保资源能够被成功编译和引用，从而避免常见的资源加载失败问题。

理解Laravel与Vite的资源加载机制

在现代Laravel项目中，Vite已成为默认的前端资产构建工具，取代了之前的Laravel Mix。Vite以其快速的开发服务器和优化的生产构建而闻名。然而，这种转变也意味着前端资源的引用方式发生了变化。传统的直接通过<script src="/js/app.js"></script>或{{ asset('js/app.js') }}引用资源的方式，在Vite环境下往往会导致404 (Not Found)错误。

这是因为Vite在开发模式下会启动一个独立的开发服务器来提供资产，并且在生产模式下，它会将资产编译、哈希化并放置到public/build目录下，其最终的文件名和路径是由Vite生成的清单文件（manifest file）决定的。因此，直接硬编码的路径或asset()辅助函数无法正确解析Vite处理后的动态路径。

解决404错误：使用@vite Blade指令

为了与Vite的资源管理机制无缝对接，Laravel提供了一个专门的Blade指令：@vite。这个指令负责读取Vite生成的清单文件，并根据当前环境（开发或生产）生成正确的<script>和<link>标签，指向Vite处理后的资源。

问题场景示例：

假设您的vite.config.js文件配置如下，其中包含了模块（如nwidart/laravel-Module）的资产路径：

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'Modules/Auth/Resources/css/app.css',
                'Modules/Auth/Resources/assets/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

登录后复制

如果您在Blade文件中尝试通过以下方式加载JavaScript：

<!-- 错误的引用方式 -->
<body>
    <!-- ... -->
    <script src="/js/app.js"></script>
    <!-- 或者 -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>

登录后复制

这将会导致浏览器尝试访问http://127.0.0.1:8000/js/app.js，但由于Vite已经接管了这些资源的提供，该路径下并不存在文件，从而返回404错误。

正确的解决方案：

要正确加载Vite管理的资产，您需要使用@vite指令，并传入在vite.config.js中input数组里定义的完整路径。

百度文心百中

百度大模型语义搜索体验中心

查看详情

加载单个JavaScript文件：

如果您只需要加载模块中的JavaScript文件，请将Blade模板中的错误引用替换为：
```
<body>
    
    @vite('Modules/Auth/Resources/assets/js/app.js')
</body>
```
登录后复制
@vite指令会自动判断当前环境。在开发模式下，它会生成一个连接到Vite开发服务器的脚本标签；在生产模式下，它会生成一个指向编译后、带哈希的文件名的脚本标签。
同时加载JavaScript和CSS文件：

如果您需要同时加载模块的CSS和JavaScript文件，可以将它们作为数组传递给@vite指令：
```
<body>
    
    @vite(['Modules/Auth/Resources/css/app.css', 'Modules/Auth/Resources/assets/js/app.js'])
</body>
```
登录后复制
@vite指令会智能地为CSS文件生成<link>标签，为JavaScript文件生成<script>标签。

注意事项与最佳实践

路径匹配： 传递给@vite指令的路径必须与vite.config.js文件中input数组中定义的路径完全一致。这是Vite识别和处理资产的关键。
Vite开发服务器： 在开发环境中，确保Vite开发服务器正在运行。您可以通过在项目根目录执行npm run dev来启动它。如果没有运行，即使使用了@vite指令，也可能无法加载资源。
生产环境构建： 在部署到生产环境之前，务必运行npm run build命令。这将触发Vite进行生产构建，将所有资产编译、优化并输出到public/build目录，并生成清单文件。@vite指令在生产模式下会依赖这个清单文件来正确引用资产。
模块化项目： 对于像nwidart/laravel-Module这样的模块化项目，每个模块可能有其独立的resources目录。确保vite.config.js中的input路径准确指向了各个模块的入口文件。
@vite位置： 通常，CSS文件应在<head>标签内加载，而JavaScript文件可以在<head>或<body>结束标签前加载，具体取决于您的需求和优化策略。@vite指令可以放置在这些位置。

总结

在Laravel Blade模板中集成Vite管理的资产，关键在于放弃传统的直接路径引用，转而使用Laravel提供的@vite Blade指令。通过正确配置vite.config.js的input数组，并确保@vite指令的路径与之一致，您可以有效地解决资源加载的404错误，并充分利用Vite带来的开发效率和生产性能优势。记住，无论是开发还是生产环境，Vite的资源管理流程都需要相应的命令（npm run dev或npm run build）来支持。

以上就是Laravel Blade中Vite资产加载指南：解决模块化项目中的404错误的详细内容，更多请关注php中文网其它相关文章！