Nhận URL Trang hiện tại, Đường dẫn và hàm băm bằng jQuery;
Hãy bắt đầu hướng dẫn tìm URL trang hiện tại và tìm tên đường dẫn, tên máy chủ, nguồn gốc từ URL trang hiện tại bằng jQuery với ví dụ
Làm cách nào để lấy URL Trang, Đường dẫn và hàm băm hiện tại bằng jQuery?
- Sử dụng cú pháp
$[location].attr["href"];
Để tìm URL đầy đủ của trang hiện tại - Sử dụng cú pháp
$[location].attr["origin"];
Để lấy URL cơ sở - Sử dụng cú pháp
$[location].attr["pathname"];
để tìm tên đường dẫn của URL hiện tại - Sử dụng cú pháp
$[location].attr["pathname"];
để tìm tên đường dẫn của URL hiện tại
Sử dụng cú pháp $[location].attr["href"];
Để tìm URL đầy đủ của trang hiện tại
Ví dụ sau sẽ chỉ cho bạn cách tìm URL của trang hiện tại bằng jQuery
Get Current Page URL Using jQuery $[document].ready[function[]{ $[".getUrl"].click[function[]{ var pURL = $[location].attr["href"]; alert[pURL]; }]; }]; Get URL
Sử dụng cú pháp $[location].attr["origin"];
Để lấy URL cơ sở
Ví dụ sau sẽ chỉ cho bạn cách tìm URL cơ sở hiện tại bằng jQuery
Get Current Page URL Using jQuery $[document].ready[function[]{ $[".getUrl"].click[function[]{ var originURL = $[location].attr["origin"]; alert[originURL]; }]; }]; Get URL
Sử dụng cú pháp $[location].attr["pathname"];
để tìm tên đường dẫn của URL hiện tại
Ví dụ sau sẽ chỉ cho bạn cách tìm tên đường dẫn từ URL của trang hiện tại bằng cách sử dụng jQuery
Get Pathname From Current Page URL Using jQuery $[document].ready[function[]{ $[".getUrl"].click[function[]{ var pathname = $[location].attr["pathname"]; alert[pathname]; }]; }]; Get URL
Sử dụng cú pháp
Get Current Page URL Using jQuery
$[document].ready[function[]{
$[".getUrl"].click[function[]{
var originURL = $[location].attr["origin"];
alert[originURL];
}];
}];
Get URL
1 để tìm máy chủ lưu trữ của URL hiện tại
Ví dụ sau sẽ chỉ cho bạn cách tìm tên máy chủ từ URL của trang hiện tại bằng cách sử dụng jQuery
Get Hostname From Current Page URL Using jQuery $[document].ready[function[]{ $[".getUrl"].click[function[]{ var host = $[location].attr["host"]; alert[host]; }]; }]; Get URL
Phần kết luận
Ở đây bạn đã học cách lấy URL của trang hiện tại. Ngoài ra, bạn đã học cách lấy tên đường dẫn, URL cơ sở, máy chủ lưu trữ từ URL trang hiện tại
Vite là một công cụ xây dựng giao diện người dùng hiện đại cung cấp môi trường phát triển cực kỳ nhanh và gói mã của bạn để sản xuất. Khi xây dựng các ứng dụng với Laravel, thông thường bạn sẽ sử dụng Vite để gói các tệp CSS và JavaScript của ứng dụng của bạn thành các nội dung sẵn sàng sản xuất
Laravel tích hợp liền mạch với Vite bằng cách cung cấp plugin chính thức và chỉ thị Blade để tải nội dung của bạn để phát triển và sản xuất
Ghi chú
Bạn có đang chạy Laravel Mix không? . Đối với tài liệu Mix, vui lòng truy cập trang web Laravel Mix. Nếu bạn muốn chuyển sang Vite, vui lòng xem
Lựa chọn giữa Vite và Laravel Mix
Trước khi chuyển sang Vite, các ứng dụng Laravel mới đã sử dụng Mix, được cung cấp bởi webpack, khi đóng gói nội dung. Vite tập trung vào việc cung cấp trải nghiệm nhanh hơn và hiệu quả hơn khi xây dựng các ứng dụng JavaScript phong phú. Nếu bạn đang phát triển Ứng dụng một trang [SPA], bao gồm cả những ứng dụng được phát triển bằng các công cụ như Quán tính, thì Vite sẽ là sự lựa chọn hoàn hảo
Vite cũng hoạt động tốt với các ứng dụng kết xuất phía máy chủ truyền thống với "sprinkle" JavaScript, bao gồm cả những ứng dụng sử dụng Livewire. Tuy nhiên, nó thiếu một số tính năng mà Laravel Mix hỗ trợ, chẳng hạn như khả năng sao chép nội dung tùy ý vào bản dựng không được tham chiếu trực tiếp trong ứng dụng JavaScript của bạn
Di chuyển trở lại kết hợp
Bạn đã bắt đầu một ứng dụng Laravel mới bằng cách sử dụng giàn giáo Vite của chúng tôi nhưng cần quay lại Laravel Mix và webpack? . xin vui lòng tham khảo ý kiến của chúng tôi
Cài đặt & Thiết lập
Ghi chú
Tài liệu sau đây thảo luận về cách cài đặt và định cấu hình plugin Laravel Vite theo cách thủ công. Tuy nhiên, bộ công cụ khởi động của Laravel đã bao gồm tất cả giàn giáo này và là cách nhanh nhất để bắt đầu với Laravel và Vite
Cài đặt nút
Bạn phải đảm bảo rằng Nút. js [16+] và NPM được cài đặt trước khi chạy Vite và plugin Laravel
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 Vite và Laravel Plugin
Trong một bản cài đặt mới của Laravel, bạn sẽ tìm thấy tệp
@vite[['resources/css/app.css', 'resources/js/app.js']]
2 trong thư mục gốc của cấu trúc thư mục ứng dụng của bạn. Tệp @vite[['resources/css/app.css', 'resources/js/app.js']]
2 mặc định đã bao gồm mọi thứ bạn cần để bắt đầu sử dụng Vite và plugin Laravel. Bạn có thể cài đặt các phụ thuộc giao diện người dùng của ứng dụng của mình thông qua NPMĐịnh cấu hình Vite
Vite được định cấu hình thông qua tệp
@vite[['resources/css/app.css', 'resources/js/app.js']]
4 trong thư mục gốc của dự án của bạn. Bạn có thể tự do tùy chỉnh tệp này dựa trên nhu cầu của mình và bạn cũng có thể cài đặt bất kỳ plugin nào khác mà ứng dụng của bạn yêu cầu, chẳng hạn như @vite[['resources/css/app.css', 'resources/js/app.js']]
5 hoặc @vite[['resources/css/app.css', 'resources/js/app.js']]
6Plugin Laravel Vite yêu cầu bạn chỉ định các điểm vào cho ứng dụng của mình. Đây có thể là các tệp JavaScript hoặc CSS và bao gồm các ngôn ngữ được xử lý trước như TypeScript, JSX, TSX và Sass
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
Nếu bạn đang xây dựng một SPA, bao gồm các ứng dụng được xây dựng bằng Quán tính, thì Vite hoạt động tốt nhất mà không cần điểm vào CSS
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
Thay vào đó, bạn nên nhập CSS của mình qua JavaScript. Thông thường, điều này sẽ được thực hiện trong tệp
@vite[['resources/css/app.css', 'resources/js/app.js']]
7 của ứng dụng của bạnPlugin Laravel cũng hỗ trợ nhiều điểm vào và các tùy chọn cấu hình nâng cao như
Làm việc với máy chủ phát triển an toàn
Nếu máy chủ web phát triển cục bộ của bạn đang phục vụ ứng dụng của bạn qua HTTPS, thì bạn có thể gặp sự cố khi kết nối với máy chủ phát triển Vite
Nếu bạn đang sử dụng Laravel Valet để phát triển cục bộ và đã chạy ứng dụng của mình, bạn có thể định cấu hình máy chủ phát triển Vite để tự động sử dụng chứng chỉ TLS do Valet tạo
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
Khi sử dụng máy chủ web khác, bạn nên tạo chứng chỉ đáng tin cậy và định cấu hình Vite theo cách thủ công để sử dụng chứng chỉ đã tạo
export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
Nếu bạn không thể tạo chứng chỉ đáng tin cậy cho hệ thống của mình, bạn có thể cài đặt và định cấu hình plugin
@vite[['resources/css/app.css', 'resources/js/app.js']]
8. Khi sử dụng các chứng chỉ không đáng tin cậy, bạn cần chấp nhận cảnh báo chứng chỉ cho máy chủ phát triển của Vite trong trình duyệt của mình bằng cách nhấp vào liên kết "Cục bộ" trong bảng điều khiển của bạn khi chạy lệnh @vite[['resources/css/app.css', 'resources/js/app.js']]
9Đang tải tập lệnh và kiểu của bạn
Với các điểm vào Vite của bạn được định cấu hình, bạn chỉ cần tham khảo chúng trong một chỉ thị Blade
@vite['resources/js/app.js']
0 mà bạn thêm vào mẫu gốc của ứng dụng của mình @vite[['resources/css/app.css', 'resources/js/app.js']]
Nếu bạn đang nhập CSS của mình qua JavaScript, thì bạn chỉ cần bao gồm điểm nhập JavaScript
@vite['resources/js/app.js']
Chỉ thị
@vite['resources/js/app.js']
1 sẽ tự động phát hiện máy chủ phát triển Vite và đưa ứng dụng khách Vite vào để kích hoạt Thay thế mô-đun nóng. Trong chế độ xây dựng, lệnh sẽ tải nội dung đã biên dịch và phiên bản của bạn, bao gồm mọi CSS đã nhậpNếu cần, bạn cũng có thể chỉ định đường dẫn xây dựng của nội dung đã biên dịch của mình khi gọi chỉ thị
@vite['resources/js/app.js']
1 {{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
Chạy Vite
Có hai cách bạn có thể chạy Vite. Bạn có thể chạy máy chủ phát triển thông qua lệnh
@vite['resources/js/app.js']
3, lệnh này rất hữu ích khi phát triển cục bộ. Máy chủ phát triển sẽ tự động phát hiện các thay đổi đối với tệp của bạn và ngay lập tức phản ánh chúng trong bất kỳ cửa sổ trình duyệt đang mở nàoHoặc, chạy lệnh
@vite['resources/js/app.js']
4 sẽ tạo phiên bản và đóng gói nội dung ứng dụng của bạn và chuẩn bị sẵn sàng để bạn triển khai vào sản xuất# Run the Vite development server...
# Build and version the assets for production...
Làm việc với JavaScript
bí danh
Theo mặc định, plugin Laravel cung cấp một bí danh chung để giúp bạn bắt đầu chạy và thuận tiện nhập nội dung của ứng dụng của bạn
Bạn có thể ghi đè bí danh
@vite['resources/js/app.js']
5 bằng cách thêm bí danh của riêng bạn vào tệp cấu hình @vite[['resources/css/app.css', 'resources/js/app.js']]
4import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
Vue
Nếu bạn muốn xây dựng giao diện người dùng của mình bằng khung Vue, thì bạn cũng sẽ cần cài đặt plugin
@vite[['resources/css/app.css', 'resources/js/app.js']]
5npm install --save-dev @vitejs/plugin-vue
Sau đó, bạn có thể đưa plugin vào tệp cấu hình
@vite[['resources/css/app.css', 'resources/js/app.js']]
4 của mình. Có một số tùy chọn bổ sung mà bạn sẽ cần khi sử dụng plugin Vue với Laravelimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
0Ghi chú
Bộ khởi động của Laravel đã bao gồm cấu hình Laravel, Vue và Vite phù hợp. Kiểm tra cách nhanh nhất để bắt đầu với Laravel, Vue và Vite
Phản ứng
Nếu bạn muốn xây dựng giao diện người dùng của mình bằng cách sử dụng khung React, thì bạn cũng sẽ cần cài đặt plugin
@vite[['resources/css/app.css', 'resources/js/app.js']]
6import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
1Sau đó, bạn có thể đưa plugin vào tệp cấu hình
@vite[['resources/css/app.css', 'resources/js/app.js']]
4 của mìnhimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
2Bạn sẽ cần đảm bảo rằng bất kỳ tệp nào chứa JSX đều có phần mở rộng
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
1 hoặc {{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
2, hãy nhớ cập nhật điểm vào của bạn, nếu được yêu cầu, nhưBạn cũng sẽ cần bao gồm chỉ thị bổ sung
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
3 Blade cùng với chỉ thị @vite['resources/js/app.js']
1 hiện tại của bạnimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
3Chỉ thị
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
3 phải được gọi trước chỉ thị @vite['resources/js/app.js']
1Ghi chú
Bộ khởi động của Laravel đã bao gồm cấu hình Laravel, React và Vite phù hợp. Kiểm tra cách nhanh nhất để bắt đầu với Laravel, React và Vite
quán tính
Plugin Laravel Vite cung cấp chức năng
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
7 thuận tiện để giúp bạn giải quyết các thành phần trang Quán tính của mình. Dưới đây là một ví dụ về trình trợ giúp được sử dụng với Vue 3; import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
4Ghi chú
Bộ khởi động của Laravel đã bao gồm cấu hình Laravel, Inertia và Vite thích hợp. Kiểm tra cách nhanh nhất để bắt đầu với Laravel, Inertia và Vite
Xử lý URL
Khi sử dụng Vite và tham chiếu nội dung trong HTML, CSS hoặc JS của ứng dụng của bạn, có một số lưu ý cần xem xét. Đầu tiên, nếu bạn tham chiếu nội dung bằng một đường dẫn tuyệt đối, Vite sẽ không bao gồm nội dung đó trong bản dựng;
Khi tham chiếu các đường dẫn nội dung tương đối, bạn nên nhớ rằng các đường dẫn này có liên quan đến tệp nơi chúng được tham chiếu. Bất kỳ nội dung nào được tham chiếu qua một đường dẫn tương đối sẽ được Vite viết lại, tạo phiên bản và đóng gói
Xem xét cấu trúc dự án sau
Ví dụ sau minh họa cách Vite sẽ xử lý các URL tương đối và tuyệt đối
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
5Làm việc với các biểu định kiểu
Bạn có thể tìm hiểu thêm về hỗ trợ CSS của Vite trong. Nếu bạn đang sử dụng các plugin PostCSS như Tailwind, bạn có thể tạo tệp
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
8 trong thư mục gốc của dự án và Vite sẽ tự động áp dụng tệp đóLàm việc với Blade & Routes
Xử lý nội dung tĩnh với Vite
Khi tham chiếu nội dung trong JavaScript hoặc CSS của bạn, Vite sẽ tự động xử lý và tạo phiên bản cho chúng. Ngoài ra, khi xây dựng các ứng dụng dựa trên Blade, Vite cũng có thể xử lý và phiên bản các nội dung tĩnh mà bạn chỉ tham chiếu trong các mẫu Blade
Tuy nhiên, để thực hiện điều này, bạn cần làm cho Vite biết về nội dung của mình bằng cách nhập nội dung tĩnh vào điểm vào của ứng dụng. Ví dụ: nếu bạn muốn xử lý và tạo phiên bản cho tất cả hình ảnh được lưu trữ trong
{{-- Given build path is relative to public path. --}}
@vite['resources/js/app.js', 'vendor/courier/build']
9 và tất cả phông chữ được lưu trữ trong # Run the Vite development server...
# Build and version the assets for production...
0, bạn nên thêm thông tin sau vào điểm đầu vào @vite[['resources/css/app.css', 'resources/js/app.js']]
7 của ứng dụng của mìnhCác nội dung này hiện sẽ được Vite xử lý khi chạy
# Run the Vite development server...
# Build and version the assets for production...
2. Sau đó, bạn có thể tham chiếu các nội dung này trong các mẫu Blade bằng phương pháp # Run the Vite development server...
# Build and version the assets for production...
3, phương pháp này sẽ trả về URL được phiên bản cho một nội dung nhất địnhimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
6Làm mới khi lưu
Khi ứng dụng của bạn được xây dựng bằng cách sử dụng kết xuất phía máy chủ truyền thống với Blade, Vite có thể cải thiện quy trình phát triển của bạn bằng cách tự động làm mới trình duyệt khi bạn thực hiện thay đổi để xem các tệp trong ứng dụng của mình. Để bắt đầu, bạn chỉ cần chỉ định tùy chọn
# Run the Vite development server...
# Build and version the assets for production...
4 là # Run the Vite development server...
# Build and version the assets for production...
5import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
Khi tùy chọn
# Run the Vite development server...
# Build and version the assets for production...
4 là # Run the Vite development server...
# Build and version the assets for production...
5, việc lưu tệp trong các thư mục sau sẽ kích hoạt trình duyệt thực hiện làm mới toàn bộ trang trong khi bạn đang chạy @vite[['resources/css/app.css', 'resources/js/app.js']]
9
9# Run the Vite development server...
# Build and version the assets for production...
0import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
1import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
2import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
3import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
Việc xem thư mục
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
3 rất hữu ích nếu bạn đang sử dụng Ziggy để tạo các liên kết định tuyến trong giao diện ứng dụng của bạnNếu những đường dẫn mặc định này không phù hợp với nhu cầu của bạn, bạn có thể chỉ định danh sách đường dẫn của riêng mình để xem
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
8Về cơ bản, plugin Laravel Vite sử dụng gói
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
5, gói này cung cấp một số tùy chọn cấu hình nâng cao để tinh chỉnh hành vi của tính năng này. Nếu bạn cần mức tùy chỉnh này, bạn có thể cung cấp định nghĩa import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
6import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
9bí danh
Nó phổ biến trong các ứng dụng JavaScript đến các thư mục được tham chiếu thường xuyên. Tuy nhiên, bạn cũng có thể tạo bí danh để sử dụng trong Blade bằng cách sử dụng phương thức
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
7 trên lớp import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
8. Thông thường, "macro" phải được xác định trong phương pháp import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
laravel[['resources/ts/app.tsx']],
9 của nhà cung cấp dịch vụimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
0Khi một macro đã được xác định, nó có thể được gọi trong các mẫu của bạn. Ví dụ: chúng tôi có thể sử dụng macro
npm install --save-dev @vitejs/plugin-vue
0 được xác định ở trên để tham chiếu một nội dung có tại npm install --save-dev @vitejs/plugin-vue
1import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
1URL cơ sở tùy chỉnh
Nếu nội dung biên dịch Vite của bạn được triển khai cho một miền tách biệt với ứng dụng của bạn, chẳng hạn như thông qua CDN, bạn phải chỉ định biến môi trường
npm install --save-dev @vitejs/plugin-vue
2 trong tệp npm install --save-dev @vitejs/plugin-vue
3 của ứng dụngimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
2Sau khi định cấu hình URL nội dung, tất cả các URL được viết lại cho nội dung của bạn sẽ được thêm tiền tố vào giá trị đã định cấu hình
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
3Hãy nhớ điều đó , vì vậy chúng sẽ không có tiền tố
Biến môi trường
Bạn có thể đưa các biến môi trường vào JavaScript của mình bằng cách thêm tiền tố vào trước chúng bằng ____30_______4 trong tệp ____30_______3 của ứng dụng của bạn
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
4Bạn có thể truy cập các biến môi trường được đưa vào thông qua đối tượng
npm install --save-dev @vitejs/plugin-vue
6import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
5Vô hiệu hóa Vite trong thử nghiệm
Tích hợp Vite của Laravel sẽ cố gắng giải quyết nội dung của bạn trong khi chạy thử nghiệm, điều này yêu cầu bạn chạy máy chủ phát triển Vite hoặc xây dựng nội dung của bạn
Nếu bạn muốn thử nghiệm Vite trong quá trình thử nghiệm, bạn có thể gọi phương thức
npm install --save-dev @vitejs/plugin-vue
7, phương thức này khả dụng cho bất kỳ thử nghiệm nào mở rộng lớp npm install --save-dev @vitejs/plugin-vue
8 của Laravelimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
6Nếu bạn muốn vô hiệu hóa Vite cho tất cả các bài kiểm tra, bạn có thể gọi phương thức
npm install --save-dev @vitejs/plugin-vue
7 từ phương thức import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
00 trên lớp cơ sở của bạn npm install --save-dev @vitejs/plugin-vue
8import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
7Kết xuất phía máy chủ [SSR]
Plugin Laravel Vite giúp dễ dàng thiết lập kết xuất phía máy chủ với Vite. Để bắt đầu, hãy tạo một điểm vào SSR tại
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
02 và chỉ định điểm vào bằng cách chuyển tùy chọn cấu hình cho plugin Laravelimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
8Để đảm bảo bạn không quên xây dựng lại điểm vào SSR, chúng tôi khuyên bạn nên bổ sung tập lệnh "xây dựng" trong
@vite[['resources/css/app.css', 'resources/js/app.js']]
2 của ứng dụng để tạo bản dựng SSR của mìnhimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
9Sau đó, để xây dựng và khởi động máy chủ SSR, bạn có thể chạy các lệnh sau
export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
0Ghi chú
Bộ khởi động của Laravel đã bao gồm cấu hình Laravel, Inertia SSR và Vite thích hợp. Kiểm tra cách nhanh nhất để bắt đầu với Laravel, Inertia SSR và Vite
Thuộc tính thẻ Script & Style
Chính sách bảo mật nội dung [CSP] Nonce
Nếu bạn muốn bao gồm thuộc tính
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
04 trên tập lệnh và thẻ kiểu của mình như một phần của Chính sách bảo mật nội dung, bạn có thể tạo hoặc chỉ định nonce bằng phương pháp import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
05 trong phần mềm trung gian tùy chỉnhexport default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
1Sau khi gọi phương thức
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
05, Laravel sẽ tự động bao gồm các thuộc tính import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
04 trên tất cả các thẻ kiểu và tập lệnh được tạoNếu bạn cần chỉ định nonce ở nơi khác, bao gồm cả nonce đi kèm với bộ khởi động của Laravel, bạn có thể truy xuất nó bằng phương thức
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
09export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
2Nếu bạn đã có nonce mà bạn muốn hướng dẫn Laravel sử dụng, bạn có thể chuyển nonce cho phương thức
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
05export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
3Tính toàn vẹn của nguồn phụ [SRI]
Nếu bảng kê khai Vite của bạn bao gồm các giá trị băm
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
11 cho nội dung của bạn, thì Laravel sẽ tự động thêm thuộc tính import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
11 vào bất kỳ thẻ tập lệnh và kiểu nào mà nó tạo ra để thực thi Tính toàn vẹn của nguồn tài nguyên phụ. Theo mặc định, Vite không bao gồm hàm băm import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
11 trong bảng kê khai của nó, nhưng bạn có thể kích hoạt nó bằng cách cài đặt plugin NPM import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
14export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
4Sau đó, bạn có thể kích hoạt plugin này trong tệp
@vite[['resources/css/app.css', 'resources/js/app.js']]
4 của mìnhexport default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
5Nếu được yêu cầu, bạn cũng có thể tùy chỉnh khóa kê khai nơi có thể tìm thấy hàm băm toàn vẹn
export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
6Nếu bạn muốn tắt hoàn toàn tính năng tự động phát hiện này, bạn có thể chuyển
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
16 sang phương thức import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
17export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
7Thuộc tính tùy ý
Nếu bạn cần bao gồm các thuộc tính bổ sung trên tập lệnh và thẻ kiểu của mình, chẳng hạn như thuộc tính, bạn có thể chỉ định chúng qua các phương thức
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
19 và import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
20. Thông thường, phương thức này nên được gọi từ nhà cung cấp dịch vụexport default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
8Nếu cần thêm các thuộc tính một cách có điều kiện, bạn có thể chuyển một lệnh gọi lại để nhận đường dẫn nguồn nội dung, URL của nó, đoạn tệp kê khai và toàn bộ tệp kê khai
export default defineConfig[{
key: fs.readFileSync[`/path/to/${host}.key`],
cert: fs.readFileSync[`/path/to/${host}.crt`],
9Cảnh báo
Các đối số21 và
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
22 sẽ là
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
23 trong khi máy chủ phát triển Vite đang chạy
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig[{
Tùy chỉnh nâng cao
Ngoài hộp, plugin Vite của Laravel sử dụng các quy ước hợp lý sẽ hoạt động cho phần lớn các ứng dụng; . Để kích hoạt các tùy chọn tùy chỉnh bổ sung, chúng tôi cung cấp các phương pháp và tùy chọn sau đây có thể được sử dụng thay cho chỉ thị Blade
@vite['resources/js/app.js']
1