1. Giới thiệu Vite:
Vite là frontend build tool cung cấp môi trường phát triển & đóng gói code cho production. Laravel sử dụng Vite để đóng gói CSS và Javascript cho production. Vite được chọn thay thế Laravel Mix ở các phiên bản mới hơn.
2. Cài đặt và setup ViteJS:
Bạn có thể cài đặt bằng tay hoặc sử dụng starter kits như Breeze, Jetstream đã có sẵn đầy đủ.
Cài đặt NodeJs và NPM trước khi chạy Vite và Laravel plugin.
Cài đặt Vite và Laravel Plugin:
Trong dự án Laravel mới cài đặt, file package.json ở thư mục gốc đã bao gồm Vite và Laravel plugin. Cài đặt các gói bằng lệnh:
npm installCấu hình Vite:
Cấu hình Vite trong file vite.config.js ở thư mục gốc. Bạn có thể customize file nếu cần, hoặc cài thêm plugin khác ví dụ vite-vue hoặc vite-react. Laravel Vite plugin yêu cầu bạn chỉ định entry points cho ứng dụng. Đó có thể là file JS hoặc CSS, và bao gồm các bộ tiền xử lý như TypeScript, JSX, TSX, Sass.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});Load Scripts và Styles:
Với cấu hình entry points, bạn có thể tham chiếu chúng trong @vite() blade ở thẻ <head>:
<!doctype html>
<head>
{{-- ... --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>Nếu bạn import CSS qua JS, bạn chỉ cần include JS entry point:
<!doctype html>
<head>
{{-- ... --}}
@vite('resources/js/app.js')
</head>Chỉ thị @vite sẽ tự động xác định Vite development server và inject Vite client để bật Hot Module Replacement. Ở build mode, chỉ thị sẽ load assets đã compile bao gồm bất kỳ CSS nào đã được import.
Nếu cần bạn có thể chỉ định đường dẫn cho assets đã compile:
@vite('resources/js/app.js', 'vendor/courier/build')Inline Assets:
Thi thoảng cần thiết phải include raw content assets, ví dụ cần include assets content trực tiếp vào page khi pass HTML vào 1 trình tạo PDF. Bạn có thể output content của Vite assets sử dụng content method cung cấp bởi Vite facade:
@php
use Illuminate\Support\Facades\Vite;
@endphp
<!doctype html>
<head>
{{-- ... --}}
<style>
{!! Vite::content('resources/css/app.css') !!}
</style>
<script>
{!! Vite::content('resources/js/app.js') !!}
</script>
</head>3. Run Vite:
Có 2 cách để run Vite. Run development server thông qua dev command, hữu ích khi dev local. Development server sẽ tự động xác định thay đổi files và thay đổi ngay trên trình duyệt. Hoặc bạn có thể chạy build command, lệnh này sẽ đóng gói và đánh phiên bản cho assets, sẵn sàng cho deploy lên production:
# Run the Vite development server...
npm run dev
# Build and version the assets for production...
npm run build4. Làm việc với Javascript:
Aliases: mặc định Laravel plugin cung cấp alias để hỗ trợ bạn run và import assets:
{
'@' => '/resources/js'
}Bạn có thể overwrite alias @ bằng cách add của bạn vào file vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel(['resources/ts/app.tsx']),
],
resolve: {
alias: {
'@': '/resources/ts',
},
},
});URL Process:
Khi sử dụng Vite và tham chiếu assets trong html, css hoặc js, có vài lưu ý cần cẩn thận xem xét. Đầu tiên, nếu bạn tham chiếu assets với đường dẫn tuyệt đối, Vite sẽ không include assets ở build, do đó bạn nên chắc chắn rằng assets có sẵn ở thư mục public.
Khi tham chiếu assets bằng đường dẫn tương đối, bạn nên nhớ đường dẫn là tương đối đến file nơi nó được tham chiếu. Bất kỳ assets được tham chiếu qua 1 đường dẫn tương đối sẽ được xử lý và đóng gói bởi Vite. Giả sử cấu trúc project như sau:
public/
taylor.png
resources/
js/
Pages/
Welcome.vue
images/
abigail.pngVí dụ sau cho thấy cách Vite xử lý URL tương đối và tuyệt đối:
<!-- This asset is not handled by Vite and will not be included in the build -->
<img src="/taylor.png">
<!-- This asset will be re-written, versioned, and bundled by Vite -->
<img src="../../images/abigail.png">5. Làm việc với stylesheet:
Nếu bạn sử dụng PostCSS plugins như Tailwind chẳng hạn, bạn có thể tạo file postcss.config.js ở thư mục gốc và Vite sẽ tự động apply nó:
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};Laravel starter kits đã bao gồm Tailwind, PostCSS và Vite config. Nếu bạn muốn dùng Tailwind mà không cần starter kits, xem docs tại đây: https://tailwindcss.com/docs/guides/laravel.
6. Làm việc với Blade & Routes:
Xử lý static assets với Vite:
Khi tham chiếu assets trong js hoặc css, vite tự động xử lý và đánh phiên bản nó. Hơn nữa khi build bằng Blade, Vite cũng có thể xử lý và đánh phiên bản các static assets mà bạn tham chiếu ở Blade templates. Tuy nhiên để làm được điều đó, bạn cần làm cho Vite nhận biết assets bằng cách import assets vào entry point của ứng dụng. Ví dụ, nếu bạn muốn xử lý và đánh phiên bản tất cả images trong resources/images và tất cả fonts ở trong resources/fonts, bạn nên add vào entry point resources/js/app.js:
import.meta.glob([
'../images/**',
'../fonts/**',
]);Những assets này từ giờ sẽ được xử lý bởi Vite khi chạy npm run build. Sau đó bạn có thể tham chiếu những assets này trong Blade templates sử dụng Vite::assets method, method này trả về 1 versioned URL của assets:
<img src="{{ Vite::asset('resources/images/logo.png') }}">Refresh on Save:
Khi ứng dụng được build sử dụng server-side render với Blade, Vite có thể cải thiện dev workflow bằng cách tự động refresh trình duyệt khi bạn thay đổi view files. Để làm điều này, chỉ định option refresh là true:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
// ...
refresh: true,
}),
],
});Khi set refresh là true, thay đổi những file sau đây sẽ kích hoạt trình duyệt refresh (trong khi đang chạy lệnh npm run dev:
app/View/Components/**lang/**resources/lang/**resources/views/**routes/**
7. Custom Base URLs:
8. Biến môi trường:
9. Disable Vite ở Test:
10. Server-side Render (SSR):
11. Script & Style Tag Attributes:
12. Tùy biến nâng cao:
