Lấy url cơ sở bằng javascript

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 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 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 URL

Sử dụng cú pháp 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 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'])

6

Plugin 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ạn

Plugin 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ập

Nế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ào

Hoặ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'])

4

import { 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'])

5

npm 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 Laravel

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

0

Ghi 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'])

6

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

1

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

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

2

Bạ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ạn

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

3

Chỉ 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')

1

Ghi 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({

4

Ghi 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({

5

Là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ình

Cá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 định

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

6

Là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...

5

import { 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

• # Run the Vite development server...
  # Build and version the assets for production...

  9

• import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  export default defineConfig({
          laravel(['resources/ts/app.tsx']),

  0

• import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  export default defineConfig({
          laravel(['resources/ts/app.tsx']),

  1

• import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  export default defineConfig({
          laravel(['resources/ts/app.tsx']),

  2

• import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  export default defineConfig({
          laravel(['resources/ts/app.tsx']),

  3

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ạn

Nế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({

8

Về 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']),

6

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

9

bí 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({

0

Khi 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

1

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

1

URL 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ụng

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

2

Sau 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({

3

Hã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({

4

Bạ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

6

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

5

Vô 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 Laravel

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

6

Nế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

8

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

7

Kế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 Laravel

import { 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ình

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

9

Sau đó, để 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`), 

0

Ghi 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ỉnh

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

1

Sau 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ạo

Nế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({

09

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

2

Nế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({

05

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

3

Tí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({

14

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

4

Sau đó, 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ình

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

5

Nế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`), 

6

Nế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({

17

export default defineConfig({
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 

7

Thuộ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`), 

8

Nế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`), 

9

Cảnh báo
Các đối số

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

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

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

Làm cách nào để lấy URL cơ sở của Laravel trong JavaScript?

Làm cách nào để lấy URL cơ sở từ URL trong JavaScript?

Làm cách nào để lấy URL cơ sở trong Laravel 8?

Làm cách nào để nhận URL chính hiện tại trong JavaScript?