بسته بندی دارایی (Vite)

• معرفی
• نصب و راه اندازی
  • در حال نصب Node
  • نصب Vite و پلاگین لاراول
  • پیکربندی Vite
  • بارگیری اسکریپت ها و سبک های شما
• در حال اجرا Vite
• کار با جاوا اسکریپت
  • نام مستعار
  • Vue
  • واکنش نشان دهید
  • اینرسی
  • پردازش URL
• کار با Stylesheets
• کار با Blade و Routes
  • پردازش دارایی های استاتیک با Vite
  • تازه کردن در ذخیره
  • نام مستعار
• URL های پایه سفارشی
• متغیرهای محیطی
• غیرفعال کردن Vite در تست ها
• رندر سمت سرور (SSR)
• ویژگی های برچسب اسکریپت و سبک
  • خط مشی امنیت محتوا (CSP) Nonce
  • یکپارچگی منابع فرعی (SRI)
  • ویژگی های دلخواه
• سفارشی سازی پیشرفته
  • تصحیح URL های سرور توسعه دهنده

معرفی

Vite یک ابزار ساخت ظاهری مدرن است که یک محیط توسعه بسیار سریع را فراهم می کند و کد شما را برای تولید بسته بندی می کند. هنگام ساخت برنامه های کاربردی با لاراول، معمولاً از Vite برای بسته بندی فایل های CSS و جاوا اسکریپت برنامه خود در دارایی های آماده تولید استفاده می کنید.

لاراول با ارائه یک پلاگین رسمی و دستورالعمل Blade به طور یکپارچه با Vite ادغام می شود تا دارایی های شما را برای توسعه و تولید بارگیری کند.

آیا لاراول میکس را اجرا می کنید؟ Vite جایگزین Laravel Mix در نصب های جدید Laravel شده است. برای مستندات Mix، لطفاً از وب سایت Laravel Mix دیدن کنید . اگر می‌خواهید به Vite بروید، لطفاً راهنمای مهاجرت ما را ببینید .

انتخاب بین Vite و Laravel Mix

قبل از انتقال به Vite، برنامه‌های جدید لاراول از Mix استفاده می‌کردند که توسط وب‌پک پشتیبانی می‌شود ، هنگام بسته‌بندی دارایی‌ها. Vite بر ارائه یک تجربه سریعتر و سازنده تر هنگام ساخت برنامه های کاربردی جاوا اسکریپت غنی تمرکز دارد. اگر در حال توسعه یک برنامه تک صفحه ای (SPA) هستید، از جمله برنامه هایی که با ابزارهایی مانند Inertia توسعه یافته اند ، Vite مناسب خواهد بود.

Vite همچنین با برنامه های کاربردی رندر شده در سمت سرور سنتی با "sprinkles" جاوا اسکریپت، از جمله برنامه هایی که از Livewire استفاده می کنند، به خوبی کار می کند . با این حال، فاقد برخی از ویژگی‌هایی است که Laravel Mix پشتیبانی می‌کند، مانند توانایی کپی دارایی‌های دلخواه در بیلد که مستقیماً در برنامه جاوا اسکریپت شما ارجاع داده نمی‌شوند.

بازگشت به ترکیب

آیا با استفاده از داربست Vite ما یک برنامه جدید لاراول راه اندازی کرده اید اما باید به لاراول میکس و بسته وب برگردید؟ مشکلی نیست لطفاً با راهنمای رسمی ما در مورد مهاجرت از Vite به Mix مشورت کنید .

نصب و راه اندازی

مستندات زیر نحوه نصب و پیکربندی دستی افزونه Laravel Vite را مورد بحث قرار می دهد. با این حال، کیت های شروع لاراول در حال حاضر شامل تمام این داربست ها هستند و سریع ترین راه برای شروع با لاراول و وایت هستند.

در حال نصب Node

قبل از اجرای Vite و پلاگین لاراول، باید مطمئن شوید که Node.js (16+) و NPM نصب شده اند:

node -v
npm -v

می توانید به راحتی آخرین نسخه Node و NPM را با استفاده از نصب کننده های گرافیکی ساده از وب سایت رسمی Node نصب کنید . یا اگر از Laravel Sail استفاده می کنید ، می توانید Node و NPM را از طریق Sail فراخوانی کنید:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

نصب Vite و پلاگین لاراول

در یک نصب جدید لاراول، package.json فایلی را در ریشه ساختار دایرکتوری برنامه خود خواهید دید. فایل پیش‌فرض package.json از قبل شامل همه چیزهایی است که برای شروع استفاده از Vite و پلاگین لاراول نیاز دارید. می توانید وابستگی های ظاهری برنامه خود را از طریق NPM نصب کنید:

npm install

پیکربندی Vite

Vite از طریق یک vite.config.js فایل در ریشه پروژه شما پیکربندی می شود. شما آزاد هستید که این فایل را بر اساس نیاز خود سفارشی کنید و همچنین می توانید هر افزونه دیگری را که برنامه شما نیاز دارد نصب کنید، مانند @vitejs/plugin-vue یا @vitejs/plugin-react .

افزونه لاراول وایت از شما می خواهد که نقاط ورودی برنامه خود را مشخص کنید. اینها ممکن است فایل های جاوا اسکریپت یا CSS باشند و شامل زبان های از پیش پردازش شده مانند 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',
        ]),
    ],
});

اگر در حال ساخت SPA هستید، از جمله برنامه هایی که با استفاده از Inertia ساخته شده اند، Vite بدون نقاط ورودی CSS بهترین کار را دارد:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', 
            'resources/js/app.js',
        ]),
    ],
});

در عوض، باید CSS خود را از طریق جاوا اسکریپت وارد کنید. به طور معمول، این کار در فایل برنامه شما انجام می شود resources/js/app.js :

import './bootstrap';
import '../css/app.css'; 

افزونه لاراول همچنین از چندین نقطه ورودی و گزینه های پیکربندی پیشرفته مانند نقاط ورودی SSR پشتیبانی می کند .

کار با یک سرور توسعه امن

اگر وب سرور توسعه محلی شما برنامه شما را از طریق HTTPS ارائه می کند، ممکن است در اتصال به سرور توسعه Vite با مشکل مواجه شوید.

اگر از Laravel Herd استفاده می کنید و سایت را ایمن کرده اید یا از Laravel Valet استفاده می کنید و دستور امن را در برابر برنامه خود اجرا کرده اید، افزونه Laravel Vite به طور خودکار گواهی TLS تولید شده را برای شما شناسایی و استفاده می کند.

اگر سایت را با استفاده از میزبانی که با نام دایرکتوری برنامه مطابقت ندارد ایمن کرده اید، می توانید به صورت دستی میزبان را در vite.config.js فایل برنامه خود مشخص کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', 
        }),
    ],
});

هنگام استفاده از وب سرور دیگری، باید یک گواهی قابل اعتماد ایجاد کنید و Vite را به صورت دستی پیکربندی کنید تا از گواهی های تولید شده استفاده کند:

// ...
import fs from 'fs'; 
 
const host = 'my-app.test'; 
 
export default defineConfig({
    // ...
    server: { 
        host, 
        hmr: { host }, 
        https: { 
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 
        }, 
    }, 
});

اگر نمی توانید یک گواهی قابل اعتماد برای سیستم خود ایجاد کنید، می توانید @vitejs/plugin-basic-ssl افزونه را نصب و پیکربندی کنید . هنگام استفاده از گواهینامه های غیرقابل اعتماد، باید با دنبال کردن پیوند "محلی" در کنسول خود هنگام اجرای دستور، هشدار گواهی را برای سرور توسعه Vite در مرورگر خود بپذیرید npm run dev .

اجرای سرور توسعه در Sail در WSL2

هنگام اجرای سرور توسعه Vite در لاراول Sail در زیر سیستم ویندوز برای لینوکس 2 (WSL2)، باید پیکربندی زیر را به vite.config.js فایل خود اضافه کنید تا مطمئن شوید مرورگر می تواند با سرور توسعه ارتباط برقرار کند:

// ...
 
export default defineConfig({
    // ...
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
});

اگر تغییرات فایل شما در حالی که سرور توسعه در حال اجرا است در مرورگر منعکس نمی شود، ممکن است لازم باشد server.watch.usePolling گزینه Vite را نیز پیکربندی کنید .

بارگیری اسکریپت ها و سبک های شما

با پیکربندی نقاط ورودی Vite، اکنون می توانید آنها را در @vite() دستورالعمل Blade که به <head> قالب اصلی برنامه خود اضافه می کنید، ارجاع دهید:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

اگر CSS خود را از طریق جاوا اسکریپت وارد می کنید، فقط باید نقطه ورودی جاوا اسکریپت را وارد کنید:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite('resources/js/app.js')
</head>

دستورالعمل @vite به طور خودکار سرور توسعه Vite را شناسایی می کند و مشتری Vite را برای فعال کردن Hot Module Replacement تزریق می کند. در حالت ساخت، دستورالعمل دارایی های کامپایل شده و نسخه شده شما، از جمله هر CSS وارداتی را بارگیری می کند.

در صورت نیاز، می توانید مسیر ساخت دارایی های کامپایل شده خود را هنگام فراخوانی @vite دستورالعمل نیز مشخص کنید:

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}
 
    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

دارایی های درون خطی

گاهی اوقات ممکن است لازم باشد که محتوای خام دارایی ها را به جای پیوند دادن به URL نسخه شده دارایی درج کنید. برای مثال، ممکن است نیاز داشته باشید که محتوای دارایی را مستقیماً در صفحه خود در هنگام ارسال محتوای HTML به یک تولید کننده PDF اضافه کنید. می توانید محتوای دارایی های Vite را با استفاده از content روش ارائه شده توسط Vite نما خروجی بگیرید:

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

در حال اجرا Vite

دو راه برای اجرای Vite وجود دارد. می توانید سرور توسعه را از طریق dev دستور اجرا کنید، که در هنگام توسعه محلی مفید است. سرور توسعه به طور خودکار تغییرات فایل های شما را تشخیص می دهد و فوراً آنها را در هر پنجره باز مرورگر منعکس می کند.

یا، اجرای build دستور، دارایی های برنامه شما را نسخه و بسته بندی می کند و آنها را برای استقرار در تولید آماده می کند:

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

اگر سرور توسعه را در Sail در WSL2 اجرا می کنید، ممکن است به برخی از گزینه های پیکربندی اضافی نیاز داشته باشید .

کار با جاوا اسکریپت

نام مستعار

به طور پیش‌فرض، پلاگین لاراول یک نام مستعار معمولی را برای کمک به شما فراهم می‌کند تا به بهترین شکل ممکن وارد شوید و دارایی‌های برنامه خود را به راحتی وارد کنید:

{
    '@' => '/resources/js'
}

می توانید '@' با افزودن نام مستعار خود به 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',
        },
    },
});

Vue

اگر می خواهید ظاهر خود را با استفاده از چارچوب Vue بسازید ، باید @vitejs/plugin-vue افزونه را نیز نصب کنید:

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

سپس می توانید افزونه را در vite.config.js فایل پیکربندی خود قرار دهید. هنگام استفاده از پلاگین Vue با لاراول به چند گزینه اضافی نیاز خواهید داشت:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

کیت های شروع لاراول قبلاً شامل پیکربندی مناسب Laravel، Vue، و Vite هستند. Laravel Breeze را برای سریعترین راه برای شروع کار با Laravel، Vue، و Vite بررسی کنید .

واکنش نشان دهید

اگر می خواهید ظاهر خود را با استفاده از چارچوب React بسازید ، باید @vitejs/plugin-react افزونه را نیز نصب کنید:

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

سپس می توانید افزونه را در vite.config.js فایل پیکربندی خود قرار دهید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

شما باید اطمینان حاصل کنید که هر فایلی که حاوی JSX است دارای پسوند .jsx یا پسوند باشد، به یاد داشته باشید که در صورت لزوم، همانطور که در بالا نشان داده شده است .tsx ، نقطه ورودی خود را به روز کنید .

همچنین باید @viteReactRefresh دستورالعمل Blade اضافی را در کنار دستورالعمل موجود خود قرار دهید @vite .

@viteReactRefresh
@vite('resources/js/app.jsx')

بخشنامه @viteReactRefresh باید قبل از بخشنامه فراخوانی شود @vite .

کیت های شروع لاراول قبلاً شامل پیکربندی مناسب Laravel، React و Vite هستند. Laravel Breeze را برای سریعترین راه برای شروع با Laravel، React و Vite بررسی کنید .

اینرسی

پلاگین Laravel Vite یک resolvePageComponent عملکرد مناسب برای کمک به شما در حل اجزای صفحه Inertia ارائه می دهد. در زیر نمونه ای از کمک کننده در حال استفاده با Vue 3 آمده است. با این حال، می توانید از این تابع در چارچوب های دیگری مانند React نیز استفاده کنید:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 
createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

کیت های شروع لاراول از قبل شامل پیکربندی مناسب لاراول، اینرسی و وایت می باشد. برای دریافت سریعترین راه برای شروع کار با Laravel، Inertia و Vite، Laravel Breeze را بررسی کنید .

پردازش URL

هنگام استفاده از Vite و ارجاع به دارایی ها در HTML، CSS یا JS برنامه خود، چند نکته وجود دارد که باید در نظر بگیرید. اولاً، اگر دارایی‌ها را با یک مسیر مطلق ارجاع دهید، Vite دارایی را در ساخت وارد نمی‌کند. بنابراین، باید اطمینان حاصل کنید که دارایی در فهرست عمومی شما موجود است.

هنگام ارجاع به مسیرهای دارایی نسبی، باید به یاد داشته باشید که مسیرها نسبت به فایلی که در آن ارجاع داده شده اند، هستند. هر دارایی که از طریق یک مسیر نسبی ارجاع شود، توسط Vite دوباره نوشته، نسخه‌بندی و بسته‌بندی می‌شود.

ساختار پروژه زیر را در نظر بگیرید:

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

مثال زیر نشان می دهد که Vite چگونه با URL های نسبی و مطلق رفتار می کند:

<!-- 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">

کار با Stylesheets

می‌توانید در مستندات Vite درباره پشتیبانی CSS Vite اطلاعات بیشتری کسب کنید . اگر از پلاگین های PostCSS مانند Tailwind استفاده می کنید ، می توانید یک postcss.config.js فایل در ریشه پروژه خود ایجاد کنید و Vite به طور خودکار آن را اعمال می کند:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

کیت های شروع لاراول قبلاً شامل پیکربندی مناسب Tailwind، PostCSS و Vite است. یا، اگر می‌خواهید بدون استفاده از کیت‌های شروع ما از Tailwind و Laravel استفاده کنید، راهنمای نصب Tailwind برای Laravel را بررسی کنید .

کار با Blade و Routes

پردازش دارایی های استاتیک با Vite

هنگام ارجاع به دارایی ها در جاوا اسکریپت یا CSS، Vite به طور خودکار آنها را پردازش و نسخه می کند. علاوه بر این، هنگام ساخت برنامه‌های مبتنی بر Blade، Vite همچنین می‌تواند دارایی‌های ثابتی را که تنها در قالب‌های Blade به آنها ارجاع می‌دهید، پردازش و نسخه کند.

با این حال، برای انجام این کار، باید Vite را از دارایی‌های خود با وارد کردن دارایی‌های استاتیک در نقطه ورودی برنامه آگاه کنید. به عنوان مثال، اگر می خواهید تمام تصاویر ذخیره شده در resources/images و همه فونت های ذخیره شده در را پردازش و نسخه کنید، باید موارد زیر را در نقطه ورودی resources/fonts برنامه خود اضافه کنید : resources/js/app.js

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

این دارایی‌ها اکنون توسط Vite هنگام اجرا پردازش می‌شوند npm run build . سپس می‌توانید با استفاده از این Vite::asset روش به این دارایی‌ها در قالب‌های Blade ارجاع دهید، که URL نسخه‌شده را برای یک دارایی مشخص برمی‌گرداند:

<img src="{{ Vite::asset('resources/images/logo.png') }}">

تازه کردن در ذخیره

هنگامی که برنامه شما با استفاده از رندر سمت سرور سنتی با Blade ساخته می‌شود، Vite می‌تواند با به‌روزرسانی خودکار مرورگر هنگام ایجاد تغییرات برای مشاهده فایل‌ها در برنامه، گردش کار توسعه شما را بهبود بخشد. برای شروع، می توانید به سادگی refresh گزینه را به صورت مشخص کنید true .

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

هنگامی که این refresh گزینه وجود دارد true ، ذخیره فایل‌ها در فهرست‌های زیر باعث می‌شود که مرورگر در حین اجرا، به‌روزرسانی کامل صفحه را انجام دهد npm run dev :

• app/View/Components/**
• lang/**
• resources/lang/**
• resources/views/**
• routes/**

اگر از Ziggy برای ایجاد پیوندهای مسیر در جلوی برنامه خود routes/** استفاده می کنید، تماشای دایرکتوری مفید است.

اگر این مسیرهای پیش‌فرض با نیازهای شما مطابقت ندارند، می‌توانید فهرست مسیرهای خود را برای تماشا مشخص کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

پلاگین Laravel Vite در زیر هود از این vite-plugin-full-reload بسته استفاده می کند که برخی از گزینه های پیکربندی پیشرفته را برای تنظیم دقیق رفتار این ویژگی ارائه می دهد. اگر به این سطح از سفارشی سازی نیاز دارید، ممکن است یک config تعریف ارائه دهید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

نام مستعار

در برنامه های جاوا اسکریپت ایجاد نام مستعار برای دایرکتوری هایی که به طور منظم به آنها ارجاع داده می شود رایج است . اما، می‌توانید با استفاده از macro متد روی Illuminate\Support\Facades\Vite کلاس، نام‌های مستعار برای استفاده در Blade ایجاد کنید. به طور معمول، "ماکروها" باید در boot روش ارائه دهنده خدمات تعریف شوند :

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

هنگامی که یک ماکرو تعریف شد، می توان آن را در قالب های شما فراخوانی کرد. به عنوان مثال، ما می توانیم از image کلان تعریف شده در بالا برای ارجاع به دارایی واقع در : استفاده کنیم resources/images/logo.png :

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

URL های پایه سفارشی

اگر دارایی‌های کامپایل‌شده Vite شما در دامنه‌ای جدا از برنامه‌تان، مثلاً از طریق CDN، مستقر شده‌اند، باید متغیر محیطی را در فایل ASSET_URL برنامه‌تان مشخص کنید: .env

ASSET_URL=https://cdn.example.com

پس از پیکربندی URL دارایی، تمام URL های بازنویسی شده در دارایی های شما با مقدار پیکربندی شده پیشوند داده می شود:

https://cdn.example.com/build/assets/app.9dce8d17.js

به یاد داشته باشید که URL های مطلق توسط Vite دوباره نوشته نمی شوند ، بنابراین پیشوندی ندارند.

متغیرهای محیطی

شما می توانید متغیرهای محیطی را با پیشوند در فایل VITE_ برنامه خود به جاوا اسکریپت خود وارد کنید .env :

VITE_SENTRY_DSN_PUBLIC=http://example.com

شما می توانید از طریق شیء به متغیرهای محیطی تزریق شده دسترسی داشته باشید import.meta.env :

import.meta.env.VITE_SENTRY_DSN_PUBLIC

غیرفعال کردن Vite در تست ها

ادغام Vite لاراول سعی می کند دارایی های شما را در حین اجرای تست های شما حل کند، که به شما نیاز دارد که سرور توسعه Vite را اجرا کنید یا دارایی های خود را بسازید.

اگر ترجیح می دهید Vite را در حین آزمایش تقلید کنید، می توانید روشی را که برای هر آزمایشی که کلاس withoutVite لاراول را گسترش می دهد در دسترس است فراخوانی کنید: TestCase

test('without vite example', function () {
    $this->withoutVite();
 
    // ...
});

use Tests\TestCase;
 
class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();
 
        // ...
    }
}

اگر می‌خواهید Vite را برای همه آزمایش‌ها غیرفعال کنید، می‌توانید متد را withoutVite از setUp متد موجود در کلاس پایه خود فراخوانی کنید TestCase :

<?php
 
namespace Tests;
 
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
 
abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void
    {
        parent::setUp();
 
        $this->withoutVite();
    }
}

رندر سمت سرور (SSR)

پلاگین Laravel Vite راه اندازی رندر سمت سرور با Vite را بدون دردسر می کند. برای شروع، یک نقطه ورودی SSR در آن ایجاد کنید resources/js/ssr.js و با ارسال یک گزینه پیکربندی به افزونه لاراول، نقطه ورودی را مشخص کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
        }),
    ],
});

برای اطمینان از اینکه فراموش نکنید که نقطه ورودی SSR را بازسازی کنید، توصیه می کنیم اسکریپت "build" را در برنامه خود اضافه کنید package.json تا بیلد SSR خود را ایجاد کنید:

"scripts": {
     "dev": "vite",
     "build": "vite build" 
     "build": "vite build && vite build --ssr" 
}

سپس، برای ساخت و راه اندازی سرور SSR، می توانید دستورات زیر را اجرا کنید:

npm run build
node bootstrap/ssr/ssr.js

اگر از SSR با Inertia استفاده می کنید ، می توانید در عوض از inertia:start-ssr دستور Artisan برای راه اندازی سرور SSR استفاده کنید:

php artisan inertia:start-ssr

کیت های شروع لاراول از قبل شامل پیکربندی مناسب لاراول، اینرسی SSR و Vite می باشد. Laravel Breeze را برای سریع‌ترین راه برای شروع کار با Laravel، Inertia SSR و Vite بررسی کنید .

ویژگی های برچسب اسکریپت و سبک

خط مشی امنیت محتوا (CSP) Nonce

اگر می‌خواهید یک nonce ویژگی را در تگ‌های اسکریپت و سبک خود به‌عنوان بخشی از خط‌مشی امنیت محتوای خود بگنجانید، می‌توانید با استفاده از این روش در یک میان‌افزار useCspNonce سفارشی، یک nonce ایجاد یا مشخص کنید :

<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;
 
class AddContentSecurityPolicyHeaders
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();
 
        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

پس از فراخوانی useCspNonce متد، لاراول به طور خودکار ویژگی‌ها را در تمام تگ‌های اسکریپت و سبک تولید شده درج می‌کند nonce .

اگر نیاز دارید که nonce را در جای دیگری مشخص کنید، از جمله دستورالعمل Ziggy همراه با @route کیت های شروع لاراول ، می توانید آن را با استفاده از cspNonce روش زیر بازیابی کنید:

@routes(nonce: Vite::cspNonce())

اگر از قبل یک nonce دارید که می‌خواهید به لاراول دستور استفاده از آن را بدهید، می‌توانید nonce را به useCspNonce متد ارسال کنید:

Vite::useCspNonce($nonce);

یکپارچگی منابع فرعی (SRI)

اگر مانیفست Vite شما شامل integrity هش برای دارایی‌های شما باشد، لاراول به طور خودکار این integrity ویژگی را به هر اسکریپت و تگ سبکی که ایجاد می‌کند اضافه می‌کند تا یکپارچگی زیر منبع را اعمال کند . به طور پیش فرض، Vite هش را در مانیفست خود لحاظ نمی کند integrity ، اما می توانید با نصب vite-plugin-manifest-sri افزونه NPM آن را فعال کنید:

npm install --save-dev vite-plugin-manifest-sri

سپس می توانید این افزونه را در vite.config.js فایل خود فعال کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),
    ],
});

در صورت لزوم، می‌توانید کلید مانیفست را که در آن هش یکپارچگی پیدا می‌شود، سفارشی کنید:

use Illuminate\Support\Facades\Vite;
 
Vite::useIntegrityKey('custom-integrity-key');

اگر می خواهید این تشخیص خودکار را به طور کامل غیرفعال کنید، می توانید false به useIntegrityKey روش زیر بروید:

Vite::useIntegrityKey(false);

ویژگی های دلخواه

اگر نیاز به اضافه کردن ویژگی‌های اضافی در تگ‌های اسکریپت و استایل خود دارید، مانند data-turbo-track ویژگی، می‌توانید آنها را از طریق متدهای useScriptTagAttributes و مشخص کنید useStyleTagAttributes . به طور معمول، این روش ها باید از یک ارائه دهنده خدمات فراخوانی شود :

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Specify a value for the attribute...
    'async' => true, // Specify an attribute without a value...
    'integrity' => false, // Exclude an attribute that would otherwise be included...
]);
 
Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

اگر نیاز به افزودن ویژگی‌ها به صورت مشروط دارید، می‌توانید یک فراخوان ارسال کنید که مسیر منبع دارایی، URL آن، بخش مانیفست آن و کل مانیفست را دریافت می‌کند:

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);
 
Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);

زمانی که سرور توسعه Vite در حال اجرا است، آرگومان‌های $chunk و $manifest خواهند بود . null

سفارشی سازی پیشرفته

در خارج از جعبه، پلاگین Vite لاراول از قراردادهای معقولی استفاده می کند که باید برای اکثر برنامه ها کار کند. با این حال، گاهی اوقات ممکن است لازم باشد رفتار Vite را سفارشی کنید. برای فعال کردن گزینه‌های سفارشی‌سازی اضافی، روش‌ها و گزینه‌های زیر را ارائه می‌کنیم که می‌توان به جای @vite دستورالعمل Blade از آنها استفاده کرد:

<!doctype html>
<head>
    {{-- ... --}}
 
    {{
        Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
            ->useBuildDirectory('bundle') // Customize the build directory...
            ->useManifestFilename('assets.json') // Customize the manifest filename...
            ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

در داخل vite.config.js فایل، باید همان پیکربندی را مشخص کنید:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'bundle', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
        }),
    ],
    build: {
      manifest: 'assets.json', // Customize the manifest filename...
    },
});

تصحیح URL های سرور توسعه دهنده

برخی از افزونه ها در اکوسیستم Vite فرض می کنند که URL هایی که با اسلش رو به جلو شروع می شوند همیشه به سرور توسعه دهنده Vite اشاره می کنند. با این حال، به دلیل ماهیت ادغام لاراول، اینطور نیست.

برای مثال، vite-imagetools زمانی که Vite به دارایی‌های شما سرویس می‌دهد، این افزونه URL‌هایی مانند موارد زیر را خروجی می‌دهد:

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

این vite-imagetools افزونه انتظار دارد که URL خروجی توسط Vite رهگیری شود و افزونه ممکن است تمام URL هایی را که با شروع می شوند مدیریت کند /@imagetools . اگر از افزونه هایی استفاده می کنید که انتظار چنین رفتاری را دارند، باید URL ها را به صورت دستی تصحیح کنید. vite.config.js با استفاده از گزینه می توانید این کار را در فایل خود انجام دهید transformOnServe .

/@imagetools در این مثال خاص، URL سرور توسعه‌دهنده را به همه موارد درون کد تولید شده اضافه می‌کنیم :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { imagetools } from 'vite-imagetools';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

اکنون، در حالی که Vite در حال سرویس دهی به دارایی ها است، URL هایی را که به سرور توسعه دهنده Vite اشاره می کنند، خروجی می دهد:

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">