本教程旨在指导如何在laravel项目中正确引入moment.js库，解决因laravel公共目录结构导致的`node_modules`资源加载失败问题。文章将详细介绍两种主要方法：一是手动将moment.js文件放置于`public`目录并引用；二是推荐使用laravel内置的vite构建工具，实现依赖的自动化管理和打包，确保项目的高效与可维护性。

在Laravel项目中集成第三方JavaScript库时，开发者常会遇到资源加载的问题，特别是当尝试直接从node_modules目录引用文件时。这主要是因为Laravel的Web服务器默认将public目录作为文档根目录，而node_modules目录通常位于项目根目录，在public目录之外，因此无法直接通过HTTP请求访问。本文将深入探讨这一问题，并提供两种可靠的解决方案。

理解Laravel的资源加载机制

Laravel框架的默认配置使得Web服务器（如Apache或Nginx）将请求指向项目的public目录。这意味着，所有通过浏览器访问的静态资源（如CSS、JavaScript、图片）都必须位于或能够通过public目录访问。

当你在Blade模板中使用以下代码：

浏览器会尝试从http://yourdomain.com/node_modules/...加载文件，但这会失败，因为node_modules不在public目录下，服务器会返回404 Not Found错误。

立即学习“前端免费学习笔记（深入）”；

同样，如果尝试使用asset()辅助函数，如：

这会导致PHP错误，因为asset()函数期望一个字符串参数（通常是相对于public目录的路径），而node_modules在这里被解释为一个未定义的PHP常量。

方案一：手动将Moment.js放置于公共目录

对于不涉及复杂前端构建流程或仅需少量静态资源的简单项目，你可以选择手动下载Moment.js并将其放置到Laravel的public目录中。

步骤：

花生AI

B站推出的AI视频创作工具

下载

1. 下载Moment.js： 访问Moment.js的官方CDN或GitHub仓库，下载moment.min.js文件。

2. 放置文件： 将下载的moment.min.js文件放置到Laravel项目的public目录下的一个子目录中，例如public/js/。

   your-laravel-project/
   ├── app/
   ├── public/
   │   ├── css/
   │   ├── js/
   │   │   └── moment.min.js  <-- 将文件放在这里
   │   └── index.php
   ├── resources/
   ├── ...

3. 在Blade模板中引用： 使用asset()辅助函数在你的Blade模板中引用Moment.js。asset()函数会自动生成指向public目录中资源的完整URL。

   
   
   
       
       
       
   
   
       
   Moment.js 手动引入演示
   
       
       
       
   
   

注意事项： 这种方法简单直接，但缺点是：

• 需要手动管理库的更新。
• 不适用于有大量前端依赖或需要模块化开发的复杂项目。
• 无法利用现代前端构建工具的优化（如代码分割、Tree Shaking）。

方案二：使用Vite进行现代化前端资源管理 (推荐)

对于现代Laravel项目，推荐使用Vite作为前端构建工具。Vite是Laravel 9+版本默认集成的工具，它提供了一个快速的开发服务器和优化的生产构建流程，能够无缝处理JavaScript模块、CSS预处理器等，并自动将所有资源打包到public目录。

步骤：

1. 安装Moment.js： 首先，通过npm或yarn在你的Laravel项目中安装Moment.js。这会将Moment.js添加到node_modules目录并记录在package.json中。

   npm install moment --save
   # 或者
   yarn add moment

2. 在JavaScript入口文件引入： 在你的主JavaScript入口文件（通常是resources/js/app.js）中导入Moment.js。Vite会处理这些导入，并在构建时将其打包。

   // resources/js/app.js
   
   // 如果你的项目使用了Bootstrap或其他依赖，通常会有这一行
   import './bootstrap';
   
   // 导入 Moment.js
   import moment from 'moment';
   
   // 如果其他库（如Chart.js）需要全局访问 moment 对象，可以将其暴露到 window 对象
   window.moment = moment;
   
   // 示例用法
   console.log('Moment.js 已通过 Vite 加载！');
   console.log('使用 Moment.js 获取当前时间：', moment().format('YYYY年MM月DD日 HH:mm:ss'));
   
   // 你可以在这里编写其他前端逻辑

3. 配置Vite (通常已预配置)： Laravel新项目通常已经配置好了vite.config.js。确保input数组中包含了你的JavaScript入口文件（resources/js/app.js）。

   // vite.config.js
   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'], // 确保包含你的JS入口文件
               refresh: true,
           }),
       ],
   });

4. 在Blade模板中引用Vite资源： 使用Laravel提供的@vite Blade指令来引用Vite处理后的资源。这个指令会在开发模式下自动加载Vite开发服务器的资源，在生产模式下加载构建后的静态文件。

   
   
   
       
       
       
   
       
       @vite(['resources/css/app.css', 'resources/js/app.js'])
   
   
       
   Moment.js 通过 Vite 引入演示
   
       
   
   

5. 运行Vite开发服务器或构建生产版本：

   • 开发模式： 在开发过程中，你需要运行Vite开发服务器以实现热模块重载（HMR）。

     npm run dev

     保持此命令在终端中运行。

   • 生产模式： 在部署到生产环境之前，你需要构建前端资源。

     npm run build

     这会将所有JavaScript和CSS文件打包、优化并输出到public/build目录，同时生成一个manifest.json文件供@vite指令使用。

优势：

• 自动化依赖管理： npm/yarn管理所有前端依赖。
• 模块化开发： 支持ES模块，代码结构更清晰。
• 开发体验： Vite提供极速的开发服务器和热模块重载。
• 生产优化： 自动打包、压缩、代码分割，提高应用性能。
• Laravel集成： 与Laravel无缝集成，简化前端工作流。

总结与最佳实践

正确在Laravel项目中引入Moment.js（或其他前端库）的关键在于理解Laravel的资源加载机制以及如何利用现代前端构建工具。

• 避免直接引用node_modules： 无论使用script标签还是asset()辅助函数，都不能直接指向node_modules目录下的文件，因为该目录不在Web服务器的public根目录下。
• 手动放置文件： 对于小型项目或特定需求，将moment.min.js文件手动复制到public/js等目录，并使用asset('js/moment.min.js')引用，是一种可行的方案。
• 推荐使用Vite： 对于任何现代Laravel项目，Vite是管理前端资源的首选方案。它不仅解决了node_modules的访问问题，还通过自动化、优化和模块化开发显著提升了开发效率和应用性能。通过npm install moment安装依赖，在resources/js/app.js中导入，并使用Blade的@vite指令，可以实现最优雅和高效的集成。

选择哪种方法取决于你的项目规模和对前端工作流的需求。对于大多数新项目和需要良好维护性的项目，Vite无疑是最佳实践。