Tự động tải lại là chức năng cho phép trình duyệt tự động làm mới trang web khi có sự thay đổi ở các tệp JS/Vue. Chức năng này rất tiện lợi và giúp tăng tốc độ phát triển sản phẩm
Có một số cách để cấu hình tự động tải lại cho Laravue
Use Browsersync
BrowserSync có thể tự động kiểm tra thay đổi ở các tệp và cập nhật thay đổi đó vào trình duyệt mà không cần phải làm mới bằng tay
Để có thể sử dụng Browsersync, bạn phải cài đặt browser-sync
và browser-sync-webpack-plugin
Sau đó thêm vào tệp webpack.mix.js
dòng sau
- YOUR_VHOST_NAME là tên vhost mà bạn cấu hình cho ứng dụng Laravue [
//localhost:8000/
nếu bạn sử dụng máy chủ phát triển cục bộ vớiphp artisan serve
]
Bây giờ bạn có thể bắt đầu Laravel như bình thường
Laravue sẽ tự động được mở lên và trang web sẽ tải lại nếu có thay đổi trong tệp JS/Vue
You can see more
Sử dụng thay thế mô-đun nóng
Thay thế mô-đun nóng [HMR - hay Tải lại nóng] cho phép trình duyệt không chỉ tự động làm mới khi có thay đổi ở JavaScript mà công cụ này vẫn giữ nguyên trạng thái hiện tại của trang web [ví dụ như khi điền thông tin vào biểu mẫu, hay trạng thái
HMR với máy chủ phát triển tích hợp
HMR được hỗ trợ mặc định với Laravel và máy chủ phát triển tích hợp, bạn có thể sử dụng lệnh sau để sử dụng HMR
Sau đó mở máy chủ bằng
Bây giờ nếu bạn mở Laravue tại http. //máy chủ cục bộ. 8000, trong bảng điều khiển trình duyệt, bạn sẽ thấy như sau
Lưu ý. Trong bảng điều khiển trình duyệt sẽ xuất hiện lỗi manifest.js:786 Uncaught TypeError: Cannot read property 'call' of undefined
, tuy nhiên bạn có thể bỏ qua lỗi này để lập chỉ mục. scss được biên dịch bởi webpack và liên kết trực tiếp trong hỗn hợp. cấu hình. js không thông qua các thành phần Vue. Nếu bạn muốn sửa lỗi này, bạn có thể nhập index.scss
trực tiếp vào @resources/js/views/App.vue
Đồng thời xóa dòng báo cáo_______8_______ trong webpack.mix.js
Bạn có thể tìm hiểu thêm tại đây
HMR với vhost [Nginx/Apache. ]
Nếu bạn đã cài đặt máy chủ web riêng cho bạn [không sử dụng php artisan serve
] và cấu hình Laravue với vhost, sau khi chạy browser-sync-webpack-plugin
1, bạn sẽ gặp lỗi CORS do mặc định Laravel-mix sẽ phục vụ "tài nguyên nóng" thông qua http. //máy chủ cục bộ. 8080 trong khi ứng dụng Laravue chạy trên vhost. Bạn có thể cấu hình để Laravel-mix phục vụ "hot resource" ở tên máy chủ khác bằng cách thêm các dòng sau vào webpack.mix.js
Đôi khi bạn nghĩ là làm công việc này có lợi cho SEO vì nó tự động tải lại trang web liên tục có thể tăng lượng view, thứ hạng cho trang web của bạn, hii. tuy nhiên cái gì cũng thế kỹ cảm nhiều quá đôi khi lại phản tác dụng nhất là bác google khó tính, chỉ nên cần thì dùng là hay nhât
Sau đây sẽ có nhiều cách để bạn thực hiện việc tự động làm mới trang web, chỉ là sử dụng các thẻ HTML hoặc một vài đoạn jQuery & JavaScript là OK, ngoài ra còn có thể sử dụng bằng cách tùy chỉnh trên trình duyệt
1. Tự động làm mới bằng thẻ meta
Cách này có ưu điểm là nhanh gọn dễ làm, truy nguyên do sử dụng thẻ meta nên không thể kiểm tra dấu khi chạy trên trình duyệt cũng như bot tìm kiếm. Bạn vào thẻ HEAD của HTML và viết như sau
Ví dụ bạn muốn sau 30 giây sẽ tự động làm mới lại trang bcdonline. net then you could write as after
2. Thêm đơn giản JavaScript đoạn để tự động làm mới
Cách này là chèn tệp js vào hoặc nhúng đoạn js vào thẻ HEAD, cách này sẽ làm cho dấu đi được một mã HTML khi thực thi, tuy nhiên cho thời gian vẫn cố định không thay đổi. Ví dụ cho phép trang web tự động tải lại sau 30 giây thì bạn thêm mã như sau
Bài viết chia sẻ giới thiệu cho bạn một số add-on trên firefox và extension trên google chrome giúp trang web tự động
Bài viết chia sẻ giới thiệu cho bạn một số tiện ích bổ sung trên firefox và tiện ích mở rộng trên google chrome giúp trang web tự động làm mới sau khoảng thời gian nhất định mà bạn thiết lập tùy chọn
Mục đích sử dụng auto refresh để làm gì?
Cái này người dùng thông thường chắc chắn ít sử dụng nhưng đối với Blogger thì thường sử dụng tự động làm mới hoặc những người bạn kiếm tiền trên mạng cũng thường sử dụng, tuy nhiên người dùng thông thường muốn cập nhật các tin tức mới thay vì nhấn phím
Để bổ sung thêm các tiện ích mở rộng, bạn cần cập nhật vào các liên kết sau để thêm vào trình duyệt
Tự động làm mới cho trình duyệt Google Chrome
1. Tự động làm mới
https. //trình duyệt Chrome. Google. com/cửa hàng trực tuyến/chi tiết/tự động làm mới/ifooldnmmcmlbdennkpdnlnbgbmfalko
2. Tự động làm mới dễ dàng
https. //trình duyệt Chrome. Google. com/webstore/detail/aabcgdmkeabbnleenpncegpcngjpnjkc
3. Làm mới trang
https. //trình duyệt Chrome. Google. com/webstore/detail/page-refresh/hmooaemjmediafeacjplpbpenjnpcneg
4. Làm mới siêu tự động
https. //trình duyệt Chrome. Google. com/webstore/detail/super-auto-refresh/kkhjakkgopekjlempoplnjclgedabddk
5. Tự động làm mới Plus
https. //trình duyệt Chrome. Google. com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih
Auto Refresh for browser FireFox
1. Tự động làm mới
https. // addons. mozilla. org/en-US/firefox/addon/tự động làm mới
2. tải lại mọi thứ
https. // addons. mozilla. org/en-US/firefox/addon/reloadevery/
Cách sử dụng các tiện ích tự động làm mới tiện ích
Sau khi thêm chúng vào trình duyệt, bạn hãy chia sẻ xem các Biểu tượng trên thanh công cụ, hãy nhấp vào đó và thiết lập thời gian tự động làm mới và nhấn “Bắt đầu” để bắt đầu
Để tắt tính năng này, bạn hãy nhấp vào biểu tượng đó và nhấn “Dừng” để dừng tính năng tự động làm mới
Với những tiện ích tự động tải lại trang web sau những thời gian nhất định trên hy vọng nó chia sẻ giúp ích cho mọi người