App js và app css không tìm thấy trong laravel
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 Show
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 bao gồm 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ố 8_______Theo 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 0Làm việc với các biểu định kiểuTệp 1 của ứng dụng của bạn là điểm khởi đầu cho tất cả quá trình biên dịch tài sản. 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 2 sẽ tạo tệp 3. Phần 4 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
Tiếp theo, bạn nên thêm từng "lớp" của Tailwind vào tệp 5 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 1 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 7. Ngoài ra, đảm bảo bạn thêm thẻ chế độ xem đáp ứng 8 nếu thẻ này chưa có
đă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 9 của Mix. Phương thức 9 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
Hoặc, bạn có thể thực thi 9 mà không cần bổ sung plugin để đạt được quá trình biên dịch và thu nhỏ CSS đơn giản
ngổ ngáoPhương pháp 2 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 2 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
Bạ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 2 nhiều lần
Xử 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. Để biên dịch CSS, webpack sẽ viết lại và tối ưu hóa bất kỳ lệnh gọi 5 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
Theo mặc định, Laravel Mix và webpack sẽ tìm thấy 9, sao chép nó vào thư mục 0 của bạn, sau đó viết lại 5 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ể vô hiệu hóa việc viết lại 5 như vậy 1Với việc bổ sung này vào tệp 1 của bạn, Mix sẽ không còn khớp với bất kỳ 5 nào hoặc sao chép nội dung vào thư mục công khai 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 5 trong tệp 1 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 7, 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 8 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 9. 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 0 8Đằng sau hậu trường, Mix sẽ tải xuống và bao gồm plugin 1 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 2 lớn của bạn. Phương pháp 3 của Mix khiến việc này trở nên dễ dàng 3Phương thức 3 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 2. 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ự 1Cấ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 9 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 0 của riêng bạn. Phương thức 9 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 2Lập phiên bản/Xóa bộ nhớ cacheNhiều nhà phát triển thêm hậu tố nội dung đã biên dịch của họ bằng 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 2Phương thức 2 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 hàm toàn cầu 4 của Laravel trong chế độ xem của mình để tải nội dung được băm phù hợp. Hàm 4 sẽ tự động xác định tên hiện tại của tệp được băm 4Vì 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 6 5URL cơ sở kết hợp tùy chỉnhNếu nội dung đã biên dịch Kết hợp của bạn được triển khai tới CDN tách biệt với ứng dụng của bạn, thì bạn sẽ cần thay đổi URL cơ sở được tạo bởi hàm 4. Bạn có thể làm như vậy bằng cách thêm tùy chọn cấu hình 8 vào tệp cấu hình 9 của ứng dụng của bạn 6Sau khi định cấu hình URL trộn, hàm 4 sẽ thêm tiền tố vào URL đã định cấu hình khi tạo URL cho nội dung 7Đ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 1 8Cá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 2Tiế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 1 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 5 của bạn bằng ____________6 9Sau khi biến đã được xác định trong tệp 5 của bạn, bạn có thể truy cập nó thông qua đối tượng 8. 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 9
Cách khắc phục lỗi 404 với app js và app css trong laravel?Bạn cần thay đổi màu nền của mình trong resource/sass/app. scss (hoặc bất kỳ. scss mà bạn đang sử dụng). Sau đó chạy lại npm run dev để biên dịch lại css.
Việc sử dụng APP JS trong laravel là gì?laravel sử dụng webpack để biên dịch tất cả các tệp css và js thành ứng dụng. css và ứng dụng. js , nếu bạn muốn nhập nội dung mới, hãy nhập thông qua npm hoặc yarn , sau đó chạy npm run dev để biên dịch chúng xuống. ví dụ: nếu bạn muốn sử dụng jquery trong dự án laravel, trước tiên, npm hãy cài đặt jquery.
Laravel có hỗ trợ JavaScript không?Laravel không yêu cầu bạn sử dụng một khung hoặc thư viện JavaScript cụ thể để xây dựng ứng dụng của mình . Trên thực tế, bạn hoàn toàn không phải sử dụng JavaScript. Tuy nhiên, Laravel có bao gồm một số giàn giáo cơ bản để giúp bạn bắt đầu viết JavaScript hiện đại dễ dàng hơn bằng thư viện Vue. |