Npm run dev không hoạt động laravel 9
Vite sẽ tiếp tục chạy máy chủ phát triển cho nội dung của bạn khi bạn chạy 9. Máy chủ đó sẽ biên dịch lại nội dung của bạn khi bạn thay đổi chế độ xem phiến, tệp CSS và JavaScriptMáy chủ phát triển do Vite bắt đầu, máy chủ được chỉ định bởi Local không phải là máy chủ phục vụ dự án Laravel của bạn, nó chỉ phục vụ nội dung trong khoảng thời gian máy chủ đó đang hoạt động Đối với 00, được đặt trong tệp 01 của bạn và phải được đặt cho URL bạn sử dụng để phân phát ứng dụng Laravel của mình, URL đó là gì sẽ khác tùy thuộc vào cách bạn phân phát ứng dụng Laravel cục bộVí dụ, đối với Laravel Valet, URL sẽ là 02, đó là những gì Laravel tạo bình thường khi tạo một dự án mới. Đối với bạn, đó là 03Vì nó sẽ là 04, ít nhất là theo tài liệu. Có thể khác nhau tùy thuộc vào việc cổng 80 có miễn phí hay khôngĐối với 05 sẽ là 06 trừ khi cổng đã được sử dụng, sau đó cổng sẽ tăng lên thành cổng 8001. , hoặc trừ khi bạn đã chỉ định một cổng khác có cờ 07 Laravel Mix, một gói được phát triển bởi Jeffrey Way, người tạo ra Laracasts, cung cấp API thông thạo để xác định các bước xây dựng webpack cho ứng dụng Laravel của bạn bằng cách sử dụng một số bộ xử lý trước CSS và JavaScript phổ biến Nói cách khác, Mix làm cho việc biên dịch và thu nhỏ các tệp CSS và JavaScript của ứng dụng của bạn trở nên dễ dàng. Thông qua chuỗi phương thức đơn giản, bạn có thể xác định thành thạo quy trình tài sản của mình. Ví dụ
Nếu bạn đã từng bối rối và choáng ngợp khi bắt đầu với webpack và biên dịch nội dung, thì bạn sẽ thích Laravel Mix. Tuy nhiên, bạn không bắt buộc phải sử dụng nó trong khi phát triển ứng dụng của mình;
Cài đặt & Thiết lậpCài đặt nútTrước khi chạy Mix, trước tiên bạn phải đảm bảo rằng Node. js và NPM được cài đặt trên máy của bạn Bạn có thể dễ dàng cài đặt phiên bản mới nhất của Node và NPM bằng trình cài đặt đồ họa đơn giản từ trang web chính thức của Node. Hoặc, nếu bạn đang sử dụng Laravel Sail, bạn có thể gọi Node và NPM thông qua Sail Cài đặt Laravel MixBước duy nhất còn lại là cài đặt Laravel Mix. Trong bản cài đặt mới của Laravel, bạn sẽ tìm thấy tệp 2 trong thư mục gốc của cấu trúc thư mục của mình. Tệp 2 mặc định đã bao gồm mọi thứ bạn cần để bắt đầu sử dụng Laravel Mix. Hãy coi tệp này giống như tệp 4 của bạn, ngoại trừ nó xác định các phần phụ thuộc của Nút thay vì các phần phụ thuộc của PHP. Bạn có thể cài đặt các phụ thuộc mà nó tham chiếu bằng cách chạyChạy hỗn hợpMix là một lớp cấu hình trên cùng của webpack, vì vậy để chạy các tác vụ Mix của bạn, bạn chỉ cần thực thi một trong các tập lệnh NPM có trong tệp Laravel 2 mặc định. Khi bạn chạy tập lệnh 6 hoặc 7, tất cả nội dung CSS và JavaScript của ứng dụng của bạn sẽ được biên dịch và đặt trong thư mục 8 của ứng dụng________số 8Theo dõi tài sản để thay đổiLệnh 9 sẽ tiếp tục chạy trong thiết bị đầu cuối của bạn và xem tất cả các tệp CSS và JavaScript có liên quan để biết các thay đổi. Webpack sẽ tự động biên dịch lại nội dung của bạn khi phát hiện thay đổi đối với một trong các tệp nàyWebpack có thể không phát hiện được các thay đổi tệp của bạn trong một số môi trường phát triển cục bộ. Nếu trường hợp này xảy ra trên hệ thống của bạn, hãy cân nhắc sử dụng lệnh 00Làm việc với các biểu định kiểuTệp 01 của ứng dụng của bạn là điểm vào của bạn cho tất cả quá trình biên dịch nội dung. Hãy nghĩ về nó như một trình bao bọc cấu hình nhẹ xung quanh webpack. Các tác vụ hỗn hợp có thể được xâu chuỗi lại với nhau để xác định chính xác cách biên dịch nội dung của bạnCSS đuôi gióTailwind CSS là một khung hiện đại, ưu tiên tiện ích để xây dựng các trang web tuyệt vời mà không cần rời khỏi HTML của bạn. Hãy tìm hiểu cách bắt đầu sử dụng nó trong dự án Laravel với Laravel Mix. Trước tiên, chúng ta nên cài đặt Tailwind bằng NPM và tạo tệp cấu hình Tailwind Lệnh 02 sẽ tạo tệp 03. Phần 04 của tệp này cho phép bạn định cấu hình đường dẫn đến tất cả các mẫu HTML, thành phần JavaScript và bất kỳ tệp nguồn nào khác có chứa tên lớp Tailwind để mọi lớp CSS không được sử dụng trong các tệp này sẽ bị xóa khỏi sản phẩm của bạn 5Tiếp theo, bạn nên thêm từng "lớp" của Tailwind vào tệp 05 của ứng dụngSau khi định cấu hình các lớp của Tailwind, bạn đã sẵn sàng cập nhật tệp 01 của ứng dụng để biên dịch CSS do Tailwind cung cấp
Cuối cùng, bạn nên tham chiếu biểu định kiểu của mình trong mẫu bố cục chính của ứng dụng. Nhiều ứng dụng chọn lưu trữ mẫu này tại 07. Ngoài ra, hãy đảm bảo bạn thêm thẻ chế độ xem đáp ứng 08 nếu thẻ này chưa có 0đăngCSSPostCSS, một công cụ mạnh mẽ để chuyển đổi CSS của bạn, được bao gồm trong Laravel Mix ngay lập tức. Theo mặc định, Mix tận dụng plugin Autoprefixer phổ biến để tự động áp dụng tất cả các tiền tố nhà cung cấp CSS3 cần thiết. Tuy nhiên, bạn có thể tự do thêm bất kỳ plugin bổ sung nào phù hợp với ứng dụng của mình Trước tiên, hãy cài đặt plugin mong muốn thông qua NPM và đưa nó vào mảng plugin của bạn khi gọi phương thức 09 của Mix. Phương thức 09 chấp nhận đường dẫn đến tệp CSS của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ hai 4Hoặc, bạn có thể thực thi 09 mà không cần bổ sung plugin để đạt được quá trình biên dịch và thu nhỏ CSS đơn giản 6ngổ ngáoPhương thức 42 cho phép bạn biên dịch Sass thành CSS mà trình duyệt web có thể hiểu được. Phương thức 42 chấp nhận đường dẫn đến tệp Sass của bạn làm đối số đầu tiên và thư mục chứa tệp đã biên dịch sẽ được đặt làm đối số thứ hai của nó 9Bạn có thể biên dịch nhiều tệp Sass thành các tệp CSS tương ứng của riêng chúng và thậm chí tùy chỉnh thư mục đầu ra của CSS kết quả bằng cách gọi phương thức 42 nhiều lần 1Xử lý URLBởi vì Laravel Mix được xây dựng trên webpack, điều quan trọng là phải hiểu một vài khái niệm về webpack. Đối với quá trình biên dịch CSS, webpack sẽ viết lại và tối ưu hóa bất kỳ lệnh gọi 45 nào trong biểu định kiểu của bạn. Mặc dù điều này ban đầu nghe có vẻ lạ, nhưng đây là một phần chức năng cực kỳ mạnh mẽ. Hãy tưởng tượng rằng chúng tôi muốn biên dịch Sass bao gồm một URL tương đối thành một hình ảnh 3
Theo mặc định, Laravel Mix và webpack sẽ tìm thấy 49, sao chép nó vào thư mục 60 của bạn, sau đó viết lại 45 trong biểu định kiểu đã tạo của bạn. Như vậy, CSS được biên dịch của bạn sẽ là 0Dù tính năng này có hữu ích đến đâu, cấu trúc thư mục hiện tại của bạn có thể đã được định cấu hình theo cách bạn muốn. Nếu trường hợp này xảy ra, bạn có thể tắt viết lại 45 như vậy 1Với phần bổ sung này vào tệp 01 của bạn, Mix sẽ không còn khớp với bất kỳ 45 nào hoặc sao chép nội dung vào thư mục chung của bạn. Nói cách khác, CSS được biên dịch sẽ trông giống như cách bạn gõ ban đầu 2Bản đồ nguồnMặc dù bị tắt theo mặc định, bản đồ nguồn có thể được kích hoạt bằng cách gọi phương thức 65 trong tệp 01 của bạn. Mặc dù nó đi kèm với chi phí biên dịch/hiệu suất, nhưng điều này sẽ cung cấp thêm thông tin gỡ lỗi cho các công cụ dành cho nhà phát triển của trình duyệt của bạn khi sử dụng nội dung đã biên dịch 3Phong cách lập bản đồ nguồnWebpack cung cấp nhiều loại. Theo mặc định, kiểu ánh xạ nguồn của Mix được đặt thành 67, cung cấp thời gian xây dựng lại nhanh. Nếu bạn muốn thay đổi kiểu ánh xạ, bạn có thể làm như vậy bằng cách sử dụng phương pháp 68 4Làm việc với JavaScriptMix cung cấp một số tính năng để giúp bạn làm việc với các tệp JavaScript của mình, chẳng hạn như biên dịch ECMAScript hiện đại, gói mô-đun, thu nhỏ và nối các tệp JavaScript đơn giản. Thậm chí tốt hơn, tất cả điều này hoạt động trơn tru mà không yêu cầu một chút cấu hình tùy chỉnh nào 5Với một dòng mã này, giờ đây bạn có thể tận dụng lợi thế của
VueMix sẽ tự động cài đặt các plugin Babel cần thiết để hỗ trợ biên dịch thành phần tệp đơn Vue khi sử dụng phương thức 69. Không cần cấu hình thêm 3Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình 7Phản ứngMix có thể tự động cài đặt các plugin Babel cần thiết để hỗ trợ React. Để bắt đầu, hãy thêm lệnh gọi vào phương thức 90 8Đằng sau hậu trường, Mix sẽ tải xuống và bao gồm plugin 91 Babel thích hợp. Khi JavaScript của bạn đã được biên dịch, bạn có thể tham khảo nó trong ứng dụng của mình 7khai thác nhà cung cấpMột nhược điểm tiềm ẩn khi kết hợp tất cả JavaScript dành riêng cho ứng dụng của bạn với các thư viện của nhà cung cấp như React và Vue là nó khiến việc lưu vào bộ nhớ đệm dài hạn trở nên khó khăn hơn. Ví dụ: một lần cập nhật mã ứng dụng của bạn sẽ buộc trình duyệt tải xuống lại tất cả các thư viện của nhà cung cấp của bạn ngay cả khi chúng không thay đổi Nếu bạn có ý định cập nhật thường xuyên cho JavaScript của ứng dụng của mình, bạn nên cân nhắc trích xuất tất cả các thư viện của nhà cung cấp vào tệp của riêng họ. Bằng cách này, thay đổi đối với mã ứng dụng của bạn sẽ không ảnh hưởng đến bộ nhớ đệm của tệp lớn 92 của bạn. Phương pháp 93 của Mix khiến việc này trở nên dễ dàng 3Phương thức 93 chấp nhận một mảng gồm tất cả các thư viện hoặc mô-đun mà bạn muốn trích xuất thành tệp 92. Sử dụng đoạn mã trên làm ví dụ, Mix sẽ tạo các tệp sau
Để tránh lỗi JavaScript, hãy đảm bảo tải các tệp này theo đúng thứ tự 51Cấu hình Webpack tùy chỉnhĐôi khi, bạn có thể cần sửa đổi cấu hình Webpack bên dưới theo cách thủ công. Ví dụ: bạn có thể có một trình tải hoặc plugin đặc biệt cần được tham khảo Mix cung cấp một phương pháp 99 hữu ích cho phép bạn hợp nhất bất kỳ ghi đè cấu hình Webpack ngắn nào. Điều này đặc biệt hấp dẫn, vì nó không yêu cầu bạn sao chép và duy trì bản sao tệp 10 của riêng bạn. Phương thức 99 chấp nhận một đối tượng, đối tượng này sẽ chứa bất kỳ cấu hình dành riêng cho Webpack nào mà bạn muốn áp dụng 52Lập phiên bản/Xóa bộ nhớ cacheNhiều nhà phát triển thêm vào nội dung đã biên dịch của họ một dấu thời gian hoặc mã thông báo duy nhất để buộc trình duyệt tải nội dung mới thay vì cung cấp các bản sao cũ của mã. Mix có thể tự động xử lý việc này cho bạn bằng cách sử dụng phương pháp 12Phương thức 12 sẽ nối một hàm băm duy nhất vào tên tệp của tất cả các tệp đã biên dịch, cho phép xóa bộ nhớ cache thuận tiện hơn 3Sau khi tạo tệp được phiên bản, bạn sẽ không biết tên tệp chính xác. Vì vậy, bạn nên sử dụng chức năng toàn cầu 14 của Laravel trong chế độ xem của mình để tải nội dung được băm phù hợp. Hàm 14 sẽ tự động xác định tên hiện tại của tệp được băm 54Vì các tệp được tạo phiên bản thường không cần thiết trong quá trình phát triển, nên bạn có thể hướng dẫn quy trình tạo phiên bản chỉ chạy trong thời gian 16 5URL cơ sở kết hợp tùy chỉnhNếu nội dung đã biên dịch Mix của bạn được triển khai tới một CDN tách biệt với ứng dụng của bạn, bạn sẽ cần thay đổi URL cơ sở được tạo bởi hàm 14. Bạn có thể làm như vậy bằng cách thêm tùy chọn cấu hình 18 vào tệp cấu hình 19 của ứng dụng của bạn 56Sau khi định cấu hình URL trộn, hàm 14 sẽ thêm tiền tố vào URL đã định cấu hình khi tạo URL cho nội dung 57Đang tải lại đồng bộ hóa trình duyệtBrowserSync có thể tự động giám sát các tệp của bạn để biết các thay đổi và đưa các thay đổi của bạn vào trình duyệt mà không yêu cầu làm mới thủ công. Bạn có thể kích hoạt hỗ trợ cho việc này bằng cách gọi phương thức 31 58Các tùy chọn BrowserSync có thể được chỉ định bằng cách chuyển một đối tượng JavaScript tới phương thức 32Tiếp theo, khởi động máy chủ phát triển của webpack bằng lệnh 9. Giờ đây, khi bạn sửa đổi tập lệnh hoặc tệp PHP, bạn có thể xem khi trình duyệt làm mới trang ngay lập tức để phản ánh các thay đổi của bạnBiến môi trườngBạn có thể đưa các biến môi trường vào tập lệnh 01 của mình bằng cách thêm tiền tố vào một trong các biến môi trường trong tệp 35 của bạn bằng 36 59Sau khi biến đã được xác định trong tệp 35 của bạn, bạn có thể truy cập nó thông qua đối tượng 38. Tuy nhiên, bạn sẽ cần khởi động lại tác vụ nếu giá trị của biến môi trường thay đổi trong khi tác vụ đang chạy 0thông báoKhi khả dụng, Mix sẽ tự động hiển thị các thông báo của hệ điều hành khi biên dịch, cung cấp cho bạn phản hồi tức thì về việc biên dịch có thành công hay không. Tuy nhiên, có thể có những trường hợp bạn muốn tắt các thông báo này. Một ví dụ như vậy có thể đang kích hoạt Mix trên máy chủ sản xuất của bạn. Thông báo có thể bị hủy kích hoạt bằng phương pháp 39
Làm cách nào tôi có thể cài đặt npm trong laravel 9?json tập lệnh NPM tương ứng. cp node_modules/laravel-mix/setup/webpack. cấu hình. . Cài đặt Laravel Chạy cài đặt npm Truy cập webpack của bạn. pha trộn. js và bắt đầu Tại sao npm của tôi không hoạt động?Nguyên nhân chính của lỗi không tìm thấy lệnh npm là do npm chưa được cài đặt . Bạn có thể chạy lệnh “npm -v” để kiểm tra xem npm đã được cài chưa. Nếu không, tôi khuyên bạn nên gỡ cài đặt Node. js và sau đó cài đặt lại nút.
Làm cách nào để cài đặt Bootstrap trong Laravel 9?Làm theo các bước sau để cài đặt Bootstrap 5 trong laravel 9 với Vite. . Cài đặt dự án Laravel Cài đặt giao diện người dùng Laravel cho Bootstrap 5 Thiết lập Giàn giáo Auth với Bootstrap 5 Cài đặt phụ thuộc NPM vite nhập khẩu. cấu hình. js Bootstrap 5 Đường dẫn Cập nhật bootstrap. js Nhập Bootstrap 5 SCSS trong Thư mục JS Npm run Dev trong laravel là gì?Trong trường hợp của Laravel, lệnh npm run dev là bí danh cho lệnh phát triển npm run . Lệnh phát triển được sử dụng để chạy mô-đun trộn, được sử dụng để biên dịch các tệp JavaScript và CSS được viết cho ứng dụng Laravel. |