Laravel Vite là gì?

Vite là 

npm install --save-dev vite laravel-vite-plugin

8 là mặc định của Laravel kể từ bây giờ

Vite là một công cụ xây dựng do Evan You [người tạo ra Vue] tạo ra, sử dụng tính khả dụng của các mô-đun ES gốc trong trình duyệt

Các tính năng của Vite

• Khởi động máy chủ tức thì

• Lightning Fast HMR [Thay thế mô-đun nóng]

• Bản dựng được tối ưu hóa

• Plugin phổ quát

• API được nhập đầy đủ

• Xem thêm tính năng

Tài liệu về Laravel chứa toàn bộ phần giải thích cách nó hoạt động và cách sử dụng nó. Nhưng hầu hết chúng ta quan tâm nhiều hơn đến việc sử dụng nó trong một 

npm install --save-dev vite laravel-vite-plugin

9 Vì vậy, đó là mục đích của bài đăng này

Tại sao Vite

Trước khi chuyển sang một công cụ mới, bạn nên suy nghĩ về 

npm install --save-dev @vitejs/plugin-vue

0 bạn muốn làm điều đó. Đối với tôi, gói front-end mặc định mới của Laravel là đủ rồi, nhưng chúng ta cũng hãy nói về một số chi tiết

Lợi ích chính là 

npm install --save-dev @vitejs/plugin-vue

1 Vite khởi động máy chủ nhà phát triển mới, đóng gói nội dung và cập nhật chúng nhanh hơn so với các công cụ khác như webpack

Vite đang tận dụng những tiến bộ mới trong hệ sinh thái, như tính khả dụng của các mô-đun ES gốc trong trình duyệt và sự gia tăng của các công cụ JavaScript được viết bằng ngôn ngữ biên dịch sang ngôn ngữ gốc. Có giải thích chi tiết trong phần Tại sao Vite của tài liệu chính thức

Cập nhật khung Laravel

Để sử dụng tính năng tích hợp Vite mới, bạn cần cập nhật ít nhất phiên bản 

npm install --save-dev @vitejs/plugin-vue

2 của 

npm install --save-dev @vitejs/plugin-vue

3

composer require laravel/framework:^9.19.0

Cài đặt Vite và Laravel Plugin

Trước tiên, bạn cần cài đặt Vite và Plugin Laravel Vite bằng trình quản lý gói npm mà bạn chọn

npm install --save-dev vite laravel-vite-plugin

Bạn cũng có thể cần cài đặt các plugin Vite bổ sung cho dự án của mình, chẳng hạn như plugin Vue hoặc React

npm install --save-dev @vitejs/plugin-vue

npm install --save-dev @vitejs/plugin-react

Ngoài ra, phần 

npm install --save-dev @vitejs/plugin-vue

4 trong 

npm install --save-dev @vitejs/plugin-vue

5 tệp của chúng tôi sẽ thay đổi do tập lệnh Vite mới

npm install --save-dev vite laravel-vite-plugin

2

Đó là tất cả những gì chúng ta cần cho các kịch bản

Vì Vite là sự thay thế cho webpack nên chúng tôi có thể xóa phần phụ thuộc 

npm install --save-dev @vitejs/plugin-vue

6 và xóa tệp 

npm install --save-dev @vitejs/plugin-vue

7 khỏi ứng dụng của mình

npm install --save-dev vite laravel-vite-plugin

5

Tệp 

npm install --save-dev @vitejs/plugin-vue

5 của bạn bây giờ sẽ giống như thế này

npm install --save-dev vite laravel-vite-plugin

7

Cấu hình Vite

Bây giờ chúng ta cần thiết lập Vite. Do đó, hãy tạo một tệp 

npm install --save-dev @vitejs/plugin-vue

9 mới trong thư mục gốc của ứng dụng Laravel của bạn

npm install --save-dev vite laravel-vite-plugin

9

Đây là nơi chúng tôi sử dụng các gói 

npm install --save-dev @vitejs/plugin-react

0 và 

npm install --save-dev @vitejs/plugin-react

1, đồng thời chúng tôi cũng xác định đường dẫn nội dung của mình

Định cấu hình Vite

Tạo một ______29 tệp trong thư mục gốc của dự án của bạn

npm install --save-dev @vitejs/plugin-vue

3

Sử dụng Vite trong mẫu của bạn

Trong 

npm install --save-dev @vitejs/plugin-react

3 tệp mẫu của bạn, chúng tôi phải tải nội dung thông qua chỉ thị lưỡi 

npm install --save-dev @vitejs/plugin-react

4 mới

npm install --save-dev @vitejs/plugin-vue

6

Bạn không cần sử dụng 

npm install --save-dev @vitejs/plugin-react

5 hoặc tải chúng theo cách thủ công nữa

Cập nhật bí danh

Nếu bạn đang di chuyển các bí danh từ tệp 

npm install --save-dev @vitejs/plugin-vue

7 sang tệp 

npm install --save-dev @vitejs/plugin-vue

9 của mình, bạn nên đảm bảo rằng các đường dẫn bắt đầu bằng 

npm install --save-dev @vitejs/plugin-react

8. Ví dụ: 

npm install --save-dev @vitejs/plugin-react

9 sẽ trở thành 

npm install --save-dev vite laravel-vite-plugin

20

npm install --save-dev vite laravel-vite-plugin

0

Để thuận tiện cho bạn, plugin Laravel Vite sẽ tự động thêm bí danh 

npm install --save-dev vite laravel-vite-plugin

21 cho thư mục 

npm install --save-dev vite laravel-vite-plugin

20 của bạn. Nếu bạn không cần tùy chỉnh bí danh của mình, bạn có thể bỏ qua phần này khỏi tệp 

npm install --save-dev @vitejs/plugin-vue

9 của mình

đọc thêm. Cách cài đặt phông chữ tuyệt vời với Laravel Mix

Chạy Vite

Để chạy Vite, bạn sử dụng tập lệnh npm 

npm install --save-dev vite laravel-vite-plugin

24 mà chúng tôi đã xác định, đây chỉ là một bí danh cho 

npm install --save-dev vite laravel-vite-plugin

25

Nó sẽ biên dịch nội dung của bạn nhanh chóng. Để làm cho nội dung của bạn sẵn sàng sản xuất, bạn có thể sử dụng tập lệnh 

npm install --save-dev vite laravel-vite-plugin

26 mới để tạo phiên bản và nhóm nội dung của mình

Trong nền, Vite đang sử dụng nội dung mới được biên dịch vào thư mục 

npm install --save-dev vite laravel-vite-plugin

27. Điều này có nghĩa là chúng tôi có thể xóa các thư mục nội dung cũ, 

npm install --save-dev vite laravel-vite-plugin

28 và 

npm install --save-dev vite laravel-vite-plugin

29 trong trường hợp của tôi

Nhập mô-đun JS có thể thay đổi cho bạn

Vite chỉ hỗ trợ các mô-đun ES, vì vậy

npm install --save-dev vite laravel-vite-plugin

50 không hoạt động nữa và bạn cần phải 

npm install --save-dev vite laravel-vite-plugin

51 mô-đun ngay bây giờ trong tập lệnh của mình

Ví dụ - không hoạt động với Vite nữa

npm install --save-dev vite laravel-vite-plugin

1

Ví dụ - làm việc với Vite

npm install --save-dev vite laravel-vite-plugin

2

Biến môi trường

Bạn có thể đưa các biến môi trường vào JavaScript thông qua tệp 

npm install --save-dev vite laravel-vite-plugin

52 của mình, bằng cách đặt trước chúng bằng 

npm install --save-dev vite laravel-vite-plugin

53

Ví dụ: các biến ______154 của Laravel đã cho không còn được sử dụng cho bạn nữa

npm install --save-dev vite laravel-vite-plugin

3

Nếu bạn muốn sử dụng chúng trong JavaScript, hãy đổi tên chúng

npm install --save-dev vite laravel-vite-plugin

4

Định cấu hình Tailwind

Nếu bạn đang sử dụng Tailwind, có lẽ với một trong các bộ công cụ dành cho người mới bắt đầu của Laravel, thì bạn sẽ cần tạo tệp 

npm install --save-dev vite laravel-vite-plugin

55 . Tailwind có thể tự động tạo dữ liệu này cho bạn

npm install --save-dev vite laravel-vite-plugin

5

Hoặc, bạn có thể tạo thủ công

npm install --save-dev vite laravel-vite-plugin

6

Nếu bạn đang sử dụng các plugin PostCSS khác, chẳng hạn như 

npm install --save-dev vite laravel-vite-plugin

56, thì bạn sẽ cần đưa chúng vào cấu hình của mình

Tự động làm mới mẫu khi thay đổi

Một trong những tính năng nổi bật nhất của Vite là 

npm install --save-dev vite laravel-vite-plugin

57 dành cho Vue. js và phản ứng

Nhưng nó cũng tuyệt vời để làm mới trình duyệt sau khi thay đổi tệp. Theo mặc định, tính năng này không hoạt động với các tệp 

npm install --save-dev vite laravel-vite-plugin

58, nhưng Freek và Spatie đã có một giải pháp hiệu quả

Chỉ cần cập nhật cấu hình Vite của bạn bằng plugin tùy chỉnh có tên 

npm install --save-dev vite laravel-vite-plugin

59 tại đây

npm install --save-dev vite laravel-vite-plugin

7

Cảm ơn bạn đã đọc blog này

đọc thêm. Cách tạo mã QR trong Laravel 9

Nếu bạn muốn quản lý Máy chủ VPS / VM của mình mà không cần chạm vào dòng lệnh, hãy xem liên kết này. ServerAvatar cho phép bạn thiết lập nhanh các trang web WordPress hoặc PHP tùy chỉnh trên VPS / VM chỉ trong vài phút. Bạn có thể lưu trữ nhiều trang web trên một VPS / VM, định cấu hình chứng chỉ SSL và theo dõi tình trạng của máy chủ mà không cần chạm vào giao diện dòng lệnh

Nếu bạn có bất kỳ thắc mắc hoặc nghi ngờ nào về chủ đề này, vui lòng liên hệ với chúng tôi. Chúng tôi sẽ cố gắng liên lạc với bạn

Dự án Vite là gì?

Làm thế nào để sử dụng Vite với hỗn hợp laravel?

Làm cách nào để tắt Vite trong laravel?

Vite JavaScript là gì?