资产捆绑（Vite）
- 介绍
- 安装和设置
- 运行 Vite
- 使用 JavaScript
- 使用样式表
- 使用 Blade 和路由
- 资源预取
- 自定义基本 URL
- 环境变量
- 在测试中禁用 Vite
- 服务器端渲染（SSR）
- 脚本和样式标签属性
- 高级定制
介绍
Vite是一款现代化的前端构建工具，它提供了极快的开发环境，并能打包你的代码以供生产环境使用。使用 Laravel 构建应用程序时，你通常会使用 Vite 将应用程序的 CSS 和 JavaScript 文件打包成可用于生产的资源文件。
Laravel 通过提供官方插件和 Blade 指令来加载您的开发和生产资产，从而与 Vite 无缝集成。
您正在运行 Laravel Mix 吗？Vite 已在新的 Laravel 安装中取代了 Laravel Mix。有关 Mix 文档，请访问Laravel Mix网站。如果您想切换到 Vite，请参阅我们的迁移指南。
在 Vite 和 Laravel Mix 之间进行选择
在迁移到 Vite 之前，新的 Laravel 应用程序在打包资源时使用的是由webpack驱动的Mix。Vite 专注于在构建富 JavaScript 应用程序时提供更快、更高效的体验。如果您正在开发单页应用程序 (SPA)，包括使用Inertia等工具开发的应用程序，Vite 将是您的完美选择。
Vite 还可以与带有 JavaScript “sprinkles” 的传统服务器端渲染应用程序（包括使用Livewire 的应用程序）很好地兼容。但是，它缺少 Laravel Mix 支持的一些功能，例如将 JavaScript 应用程序中未直接引用的任意资源复制到构建中。
迁移回 Mix
您是否使用我们的 Vite 脚手架启动了新的 Laravel 应用程序，但需要迁移回 Laravel Mix 和 Webpack？没问题。请参阅我们关于从 Vite 迁移到 Mix 的官方指南。
安装和设置
以下文档讨论了如何手动安装和配置 Laravel Vite 插件。不过，Laravel 的入门套件已包含所有这些脚手架，是快速上手使用 Laravel 和 Vite 的方法。
安装 Node
在运行 Vite 和 Laravel 插件之前，必须确保已安装 Node.js（16+）和 NPM：
1node -v2npm -v您可以从Node 官方网站轻松使用简单的图形安装程序安装最新版本的 Node 和 NPM 。或者，如果您使用的是Laravel Sail，则可以通过 Sail 调用 Node 和 NPM：
1./vendor/bin/sail node -v2./vendor/bin/sail npm -v安装 Vite 和 Laravel 插件
在全新安装的 Laravel 中，您会package.json在应用程序目录结构的根目录中找到一个文件。默认package.json文件已包含开始使用 Vite 和 Laravel 插件所需的一切。您可以通过 NPM 安装应用程序的前端依赖项：
1npm install配置 Vite
Vite 的配置是通过vite.config.js项目根目录中的一个文件进行的。您可以根据需要自定义此文件，也可以安装应用程序所需的任何其他插件，例如@vitejs/plugin-vue或@vitejs/plugin-react。
Laravel Vite 插件要求你指定应用程序的入口点。这些入口点可以是 JavaScript 或 CSS 文件，并包含预处理语言，例如 TypeScript、JSX、TSX 和 Sass。
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel([ 7 'resources/css/app.css', 8 'resources/js/app.js', 9 ]),10 ],11});如果您正在构建 SPA，包括使用 Inertia 构建的应用程序，Vite 在没有 CSS 入口点的情况下效果最佳：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel([ 7 'resources/css/app.css', 8 'resources/js/app.js', 9 ]),10 ],11});相反，你应该通过 JavaScript 导入 CSS。通常，这会在你的应用程序resources/js/app.js文件中完成：
1import './bootstrap';2import '../css/app.css'; Laravel 插件还支持多个入口点和高级配置选项，例如SSR 入口点。
使用安全开发服务器
如果您的本地开发 Web 服务器通过 HTTPS 为您的应用程序提供服务，您可能会遇到连接到 Vite 开发服务器的问题。
如果您正在使用Laravel Herd并已保护站点安全，或者您正在使用Laravel Valet并已对您的应用程序运行安全命令，则 Laravel Vite 插件将自动检测并为您使用生成的 TLS 证书。
如果您使用与应用程序目录名称不匹配的主机来保护站点，则可以在应用程序的vite.config.js文件中手动指定主机：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 // ... 8 detectTls: 'my-app.test', 9 }),10 ],11});当使用其他 Web 服务器时，您应该生成受信任的证书并手动配置 Vite 以使用生成的证书：
1// ... 2import fs from 'fs'; 3 4const host = 'my-app.test'; 5 6export default defineConfig({ 7 // ... 8 server: { 9 host, 10 hmr: { host }, 11 https: { 12 key: fs.readFileSync(`/path/to/${host}.key`), 13 cert: fs.readFileSync(`/path/to/${host}.crt`), 14 }, 15 }, 16});如果您无法为系统生成受信任的证书，您可以安装并配置@vitejs/plugin-basic-ssl 插件。使用不受信任的证书时，您需要在运行命令时点击控制台中的“本地”链接，在浏览器中接受 Vite 开发服务器的证书警告npm run dev。
在 WSL2 上的 Sail 中运行开发服务器
在 Windows Subsystem for Linux 2（WSL2）上的Laravel Sail中运行 Vite 开发服务器时，您应该将以下配置添加到vite.config.js文件中，以确保浏览器可以与开发服务器通信：
1// ... 2 3export default defineConfig({ 4 // ... 5 server: { 6 hmr: { 7 host: 'localhost', 8 }, 9 }, 10});如果在开发服务器运行时文件更改未反映在浏览器中，您可能还需要配置 Vite 的server.watch.usePolling 选项。
加载脚本和样式
配置 Vite 入口点后，您现在可以在@vite()添加到<head>应用程序根模板的 Blade 指令中引用它们：
1<!DOCTYPE html>2<head>3 {{-- ... --}}4 5 @vite(['resources/css/app.css', 'resources/js/app.js'])6</head>如果您通过 JavaScript 导入 CSS，则只需包含 JavaScript 入口点：
1<!DOCTYPE html>2<head>3 {{-- ... --}}4 5 @vite('resources/js/app.js')6</head>该@vite指令将自动检测 Vite 开发服务器并注入 Vite 客户端以启用热模块替换。在构建模式下，该指令将加载已编译并已版本化的资源，包括所有导入的 CSS。
如果需要，您还可以在调用指令时指定已编译资产的构建路径@vite：
1<!doctype html>2<head>3 {{-- Given build path is relative to public path. --}}4 5 @vite('resources/js/app.js', 'vendor/courier/build')6</head>内联资产
有时可能需要包含资源的原始内容，而不是链接到资源的版本化 URL。例如，在将 HTML 内容传递给 PDF 生成器时，您可能需要将资源内容直接包含在页面中。您可以使用外观层content提供的方法输出 Vite 资源的内容Vite：
1@use('Illuminate\Support\Facades\Vite') 2 3<!doctype html> 4<head> 5 {{-- ... --}} 6 7 <style> 8 {!! Vite::content('resources/css/app.css') !!} 9 </style>10 <script>11 {!! Vite::content('resources/js/app.js') !!}12 </script>13</head>运行 Vite
您可以通过两种方式运行 Vite。您可以通过dev命令运行开发服务器，这在本地开发时非常有用。开发服务器将自动检测文件的更改，并立即反映在任何打开的浏览器窗口中。
或者，运行该build命令将对您的应用程序资产进行版本控制和捆绑，并准备好将其部署到生产环境中：
1# Run the Vite development server...2npm run dev3 4# Build and version the assets for production...5npm run build如果您在 WSL2 上的Sail中运行开发服务器，则可能需要一些额外的配置选项。
使用 JavaScript
别名
默认情况下，Laravel 插件提供了一个通用别名，以帮助您快速运行并方便地导入应用程序的资产：
1{2 '@' => '/resources/js'3}您可以'@'通过将自己的别名添加到vite.config.js配置文件来覆盖别名：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel(['resources/ts/app.tsx']), 7 ], 8 resolve: { 9 alias: {10 '@': '/resources/ts',11 },12 },13});Vue
如果您想使用Vue框架构建前端，那么您还需要安装@vitejs/plugin-vue插件：
1npm install --save-dev @vitejs/plugin-vue然后，您可以将插件添加到vite.config.js配置文件中。在 Laravel 中使用 Vue 插件时，您还需要一些其他选项：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3import vue from '@vitejs/plugin-vue'; 4 5export default defineConfig({ 6 plugins: [ 7 laravel(['resources/js/app.js']), 8 vue({ 9 template: {10 transformAssetUrls: {11 // The Vue plugin will re-write asset URLs, when referenced12 // in Single File Components, to point to the Laravel web13 // server. Setting this to `null` allows the Laravel plugin14 // to instead re-write asset URLs to point to the Vite15 // server instead.16 base: null,17 18 // The Vue plugin will parse absolute URLs and treat them19 // as absolute paths to files on disk. Setting this to20 // `false` will leave absolute URLs un-touched so they can21 // reference assets in the public directory as expected.22 includeAbsolute: false,23 },24 },25 }),26 ],27});Laravel 的入门套件已经包含了正确的 Laravel、Vue 和 Vite 配置。这些入门套件提供了最快使用 Laravel、Vue 和 Vite 的方式。
反应
如果您想使用React框架构建前端，那么您还需要安装@vitejs/plugin-react插件：
1npm install --save-dev @vitejs/plugin-react然后您可以将插件包含在您的vite.config.js配置文件中：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3import react from '@vitejs/plugin-react'; 4 5export default defineConfig({ 6 plugins: [ 7 laravel(['resources/js/app.jsx']), 8 react(), 9 ],10});您需要确保任何包含 JSX 的文件都有.jsx或.tsx扩展名，并记得在必要时更新您的入口点，如上所示。
您还需要@viteReactRefresh在现有@vite指令旁边添加附加 Blade 指令。
1@viteReactRefresh2@vite('resources/js/app.jsx')@viteReactRefresh必须在指令之前调用指令@vite。
Laravel 的入门套件已经包含了正确的 Laravel、React 和 Vite 配置。这些入门套件提供了最快使用 Laravel、React 和 Vite 的方法。
惯性
Laravel Vite 插件提供了一个便捷的resolvePageComponent函数来帮助你解析 Inertia 页面组件。以下是 Vue 3 中该Helpers的使用示例；你也可以在其他框架（例如 React）中使用该函数：
1import { createApp, h } from 'vue'; 2import { createInertiaApp } from '@inertiajs/vue3'; 3import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; 4 5createInertiaApp({ 6 resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), 7 setup({ el, App, props, plugin }) { 8 createApp({ render: () => h(App, props) }) 9 .use(plugin)10 .mount(el)11 },12});如果您将 Vite 的代码拆分功能与 Inertia 一起使用，我们建议配置资产预取。
Laravel 的入门套件已经包含了正确的 Laravel、Inertia 和 Vite 配置。这些入门套件提供了最快使用 Laravel、Inertia 和 Vite 的方式。
URL 处理
在使用 Vite 并在应用程序的 HTML、CSS 或 JS 中引用资源时，需要注意以下几点。首先，如果您使用绝对路径引用资源，Vite 将不会在构建中包含该资源；因此，您应该确保该资源在公共目录中可用。使用专用 CSS 入口点时应避免使用绝对路径，因为在开发过程中，浏览器会尝试从托管 CSS 的 Vite 开发服务器加载这些路径，而不是从公共目录加载。
引用相对资源路径时，需要注意的是，这些路径是相对于被引用文件的。任何通过相对路径引用的资源都会被 Vite 重写、版本控制和打包。
考虑以下项目结构：
1public/2 taylor.png3resources/4 js/5 Pages/6 Welcome.vue7 images/8 abigail.png以下示例演示了 Vite 如何处理相对和绝对 URL：
1<!-- This asset is not handled by Vite and will not be included in the build -->2<img src="/taylor.png">3 4<!-- This asset will be re-written, versioned, and bundled by Vite -->5<img src="../../images/abigail.png">使用样式表
Laravel 的入门套件已包含正确的 Tailwind 和 Vite 配置。或者，如果您想在不使用我们的入门套件的情况下使用 Tailwind 和 Laravel，请查看Tailwind 的 Laravel 安装指南。
所有 Laravel 应用程序都已包含 Tailwind 和正确配置的vite.config.js文件。因此，您只需启动 Vite 开发服务器，或者运行devComposer 命令，该命令将同时启动 Laravel 和 Vite 开发服务器：
1composer run dev您的应用程序的 CSS 可以放置在该resources/css/app.css文件内。
使用 Blade 和路由
使用 Vite 处理静态资源
当你在 JavaScript 或 CSS 中引用资源时，Vite 会自动处理并控制它们的版本。此外，在构建基于 Blade 的应用程序时，Vite 还可以处理并控制仅在 Blade 模板中引用的静态资源的版本。
但是，为了实现这一点，你需要通过将静态资源导入到应用程序的入口点来让 Vite 感知你的资源。例如，如果你想要处理并控制存储在 中的所有图片resources/images和存储在 中的所有字体的版本resources/fonts，你应该在应用程序的resources/js/app.js入口点中添加以下内容：
1import.meta.glob([2 '../images/**',3 '../fonts/**',4]);Vite 在运行时会处理这些资源npm run build。之后，你可以在 Blade 模板中使用Vite::asset方法来引用这些资源，该方法将返回指定资源的版本化 URL：
1<img src="{{ Vite::asset('resources/images/logo.png') }}">保存时刷新
当你使用 Blade 的传统服务端渲染构建应用程序时，Vite 可以在你更改应用程序中的视图文件时自动刷新浏览器，从而改善你的开发工作Processes。要开始使用，你只需将refresh选项指定为 即可true。
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 // ... 8 refresh: true, 9 }),10 ],11});当refresh选项为 时true，将文件保存在以下目录中将触发浏览器在运行时执行整个页面刷新npm run dev：
app/Livewire/**app/View/Components/**lang/**resources/lang/**resources/views/**routes/**
routes/**如果你正在使用Ziggy ，查看目录会很有用在应用程序前端生成路由链接，
如果这些默认路径不能满足您的需要，您可以指定自己的要监视的路径列表：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 // ... 8 refresh: ['resources/views/**'], 9 }),10 ],11});Laravel Vite 插件在底层使用了vite-plugin-full-reload包，该包提供了一些高级配置选项来微调此功能的行为。如果您需要这种级别的自定义，您可以提供以下config定义：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 // ... 8 refresh: [{ 9 paths: ['path/to/watch/**'],10 config: { delay: 300 }11 }],12 }),13 ],14});别名
在 JavaScript 应用程序中，为经常引用的目录创建别名是很常见的。但是，你也可以通过在 Blade 中使用类macro的方法来创建别名。通常，“宏”应该在服务提供者的方法Illuminate\Support\Facades\Vite中定义：boot
1/**2 * Bootstrap any application services.3 */4public function boot(): void5{6 Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));7}定义宏后，即可在模板中调用它。例如，我们可以使用image上面定义的宏来引用位于以下位置的资源resources/images/logo.png：
1<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">资源预取
使用 Vite 的代码拆分功能构建 SPA 时，每次页面导航时都会获取所需的资源。此行为可能会导致 UI 渲染延迟。如果您选择的前端框架存在此问题，Laravel 提供了在页面初始加载时预先加载应用程序 JavaScript 和 CSS 资源的功能。
您可以通过调用服务提供商的方法Vite::prefetch中的方法来指示 Laravel 急切地预取您的资产：boot
1<?php 2 3namespace App\Providers; 4 5use Illuminate\Support\Facades\Vite; 6use Illuminate\Support\ServiceProvider; 7 8class AppServiceProvider extends ServiceProvider 9{10 /**11 * Register any application services.12 */13 public function register(): void14 {15 // ...16 }17 18 /**19 * Bootstrap any application services.20 */21 public function boot(): void22 {23 Vite::prefetch(concurrency: 3);24 }25}在上面的示例中，3每次页面加载时，资源都会以最大并发下载数量进行预加载。您可以根据应用需求修改并发数量，或者如果应用需要一次性下载所有资源，则指定不限制并发数量：
1/**2 * Bootstrap any application services.3 */4public function boot(): void5{6 Vite::prefetch();7}默认情况下，预加载将在页面加载事件触发时开始。如果您想自定义预加载的开始时间，可以指定 Vite 监听的事件：
1/**2 * Bootstrap any application services.3 */4public function boot(): void5{6 Vite::prefetch(event: 'vite:prefetch');7}根据上面的代码，当你手动在对象vite:prefetch上调度事件时，预加载就会开始window。例如，你可以让预加载在页面加载三秒后开始：
1<script>2 addEventListener('load', () => setTimeout(() => {3 dispatchEvent(new Event('vite:prefetch'))4 }, 3000))5</script>自定义基本 URL
如果您的 Vite 编译资产部署到与您的应用程序分开的域（例如通过 CDN），则必须ASSET_URL在应用程序的.env文件中指定环境变量：
1ASSET_URL=https://cdn.example.com配置资产 URL 后，所有重写到资产的 URL 都将以配置的值作为前缀：
1https://cdn.example.com/build/assets/app.9dce8d17.js请记住，绝对 URL 不会被 Vite 重写，因此它们不会带有前缀。
环境变量
VITE_您可以在应用程序文件中通过添加前缀将环境变量注入 JavaScript .env：
1VITE_SENTRY_DSN_PUBLIC=http://example.com您可以通过import.meta.env对象访问注入的环境变量：
1import.meta.env.VITE_SENTRY_DSN_PUBLIC在测试中禁用 Vite
Laravel 的 Vite 集成将在运行测试时尝试解析您的资产，这需要您运行 Vite 开发服务器或构建您的资产。
如果您希望在测试期间模拟 Vite，您可以调用该withoutVite方法，该方法适用于任何扩展 LaravelTestCase类的测试：
1test('without vite example', function () {2 $this->withoutVite();3 4 // ...5}); 1use Tests\TestCase; 2 3class ExampleTest extends TestCase 4{ 5 public function test_without_vite_example(): void 6 { 7 $this->withoutVite(); 8 9 // ...10 }11}如果您想要为所有测试禁用 Vite，您可以withoutVite从setUp基TestCase类的方法中调用该方法：
1<?php 2 3namespace Tests; 4 5use Illuminate\Foundation\Testing\TestCase as BaseTestCase; 6 7abstract class TestCase extends BaseTestCase 8{ 9 protected function setUp(): void10 {11 parent::setUp();12 13 $this->withoutVite();14 }15}服务器端渲染（SSR）
Laravel Vite 插件让您可以轻松地使用 Vite 设置服务器端渲染。首先，创建一个 SSR 入口点，resources/js/ssr.js并通过将配置选项传递给 Laravel 插件来指定入口点：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 input: 'resources/js/app.js', 8 ssr: 'resources/js/ssr.js', 9 }),10 ],11});为了确保您不会忘记重建 SSR 入口点，我们建议扩充应用程序中的“构建”脚本package.json来创建 SSR 构建：
1"scripts": {2 "dev": "vite",3 "build": "vite build" 4 "build": "vite build && vite build --ssr" 5}然后，要构建并启动 SSR 服务器，您可以运行以下命令：
1npm run build2node bootstrap/ssr/ssr.js如果您将SSR 与 Inertia 一起使用，则可以改用inertia:start-ssrArtisan 命令来启动 SSR 服务器：
1php artisan inertia:start-ssrLaravel 的入门套件已经包含了正确的 Laravel、Inertia SSR 和 Vite 配置。这些入门套件提供了最快使用 Laravel、Inertia SSR 和 Vite 的方式。
脚本和样式标签属性
内容安全策略 (CSP) 随机数
如果您希望在脚本和样式标签中包含nonce 属性作为内容安全策略useCspNonce的一部分，则可以使用自定义中间件中的方法生成或指定 nonce ：
1<?php 2 3namespace App\Http\Middleware; 4 5use Closure; 6use Illuminate\Http\Request; 7use Illuminate\Support\Facades\Vite; 8use Symfony\Component\HttpFoundation\Response; 9 10class AddContentSecurityPolicyHeaders11{12 /**13 * Handle an incoming request.14 *15 * @param \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response) $next16 */17 public function handle(Request $request, Closure $next): Response18 {19 Vite::useCspNonce();20 21 return $next($request)->withHeaders([22 'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",23 ]);24 }25}调用该useCspNonce方法后，Laravel 将自动nonce在所有生成的脚本和样式标签中包含属性。
如果您需要在其他地方指定随机数，包括Laravel入门套件中包含的Ziggy@route指令，则可以使用该方法检索它：cspNonce
1@routes(nonce: Vite::cspNonce())如果您已经有一个想要指示 Laravel 使用的随机数，您可以将该随机数传递给该useCspNonce方法：
1Vite::useCspNonce($nonce);子资源完整性（SRI）
如果你的 Vite 清单中包含integrity资源的哈希值，Laravel 会自动integrity在生成的任何脚本和样式标签上添加该属性，以强制执行 子资源完整性。默认情况下，Vite 的清单中不包含integrity哈希值，但你可以通过安装vite-plugin-manifest-sri NPM 插件来启用它：
1npm install --save-dev vite-plugin-manifest-sri然后您可以在vite.config.js文件中启用此插件：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3import manifestSRI from 'vite-plugin-manifest-sri'; 4 5export default defineConfig({ 6 plugins: [ 7 laravel({ 8 // ... 9 }),10 manifestSRI(),11 ],12});如果需要，您还可以自定义可找到完整性哈希的清单键：
1use Illuminate\Support\Facades\Vite;2 3Vite::useIntegrityKey('custom-integrity-key');如果您想完全禁用此自动检测，您可以传递false该useIntegrityKey方法：
1Vite::useIntegrityKey(false);任意属性
如果您需要在脚本和样式标签中添加其他属性，例如data-turbo-track属性，您可以通过useScriptTagAttributes和方法指定它们。通常，这些方法应该从服务提供商useStyleTagAttributes处调用：
1use Illuminate\Support\Facades\Vite; 2 3Vite::useScriptTagAttributes([ 4 'data-turbo-track' => 'reload', // Specify a value for the attribute... 5 'async' => true, // Specify an attribute without a value... 6 'integrity' => false, // Exclude an attribute that would otherwise be included... 7]); 8 9Vite::useStyleTagAttributes([10 'data-turbo-track' => 'reload',11]);如果需要有条件地添加属性，您可以传递一个回调，该回调将接收资产源路径、其 URL、其清单块和整个清单：
1use Illuminate\Support\Facades\Vite;2 3Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [4 'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,5]);6 7Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [8 'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,9]);$chunk和
参数$manifest将null在 Vite 开发服务器运行时使用。
高级定制
Laravel 的 Vite 插件开箱即用，采用了合理的约定，适用于大多数应用程序；但是，有时你可能需要自定义 Vite 的行为。为了启用更多自定义选项，我们提供了以下方法和选项，可用于代替@viteBlade 指令：
1<!doctype html> 2<head> 3 {{-- ... --}} 4 5 {{ 6 Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file... 7 ->useBuildDirectory('bundle') // Customize the build directory... 8 ->useManifestFilename('assets.json') // Customize the manifest filename... 9 ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...10 ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...11 return "https://cdn.example.com/{$path}";12 })13 }}14</head>然后，您应该在文件中vite.config.js指定相同的配置：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 hotFile: 'storage/vite.hot', // Customize the "hot" file... 8 buildDirectory: 'bundle', // Customize the build directory... 9 input: ['resources/js/app.js'], // Specify the entry points...10 }),11 ],12 build: {13 manifest: 'assets.json', // Customize the manifest filename...14 },15});开发服务器跨域资源共享 (CORS)
如果您在从 Vite 开发服务器获取资源时在浏览器中遇到跨域资源共享 (CORS) 问题，则可能需要向开发服务器授予自定义源的访问权限。Vite 与 Laravel 插件结合使用时，无需任何其他配置即可支持以下源：
::1127.0.0.1localhost*.test*.localhostAPP_URL在项目中.env
为你的项目允许自定义源的最简单方法是确保应用程序的APP_URL环境变量与你在浏览器中访问的源匹配。例如，如果你正在访问https://my-app.laravel，则应该更新你的.env环境变量以匹配：
1APP_URL=https://my-app.laravel如果你需要对源进行更细粒度的控制，比如支持多个源，那么可以使用Vite 全面灵活的内置 CORS 服务器配置。例如，你可以server.cors.origin在项目vite.config.js文件的配置选项中指定多个源：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 input: 'resources/js/app.js', 8 refresh: true, 9 }),10 ],11 server: { 12 cors: { 13 origin: [ 14 'https://backend.laravel', 15 'http://admin.laravel:8566', 16 ], 17 }, 18 }, 19});您还可以包含正则表达式模式，如果您希望允许给定顶级域的所有来源，这可能会有所帮助，例如*.laravel：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3 4export default defineConfig({ 5 plugins: [ 6 laravel({ 7 input: 'resources/js/app.js', 8 refresh: true, 9 }),10 ],11 server: { 12 cors: { 13 origin: [ 14 // Supports: SCHEME://DOMAIN.laravel[:PORT] 15 /^https?:\/\/.*\.laravel(:\d+)?$/, 16 ], 17 }, 18 }, 19});更正开发服务器 URL
Vite 生态系统中的一些插件假设以正斜杠开头的 URL 始终指向 Vite 开发服务器。然而，由于 Laravel 集成的特性，情况并非如此。
例如，vite-imagetools当 Vite 为您的资产提供服务时，插件会输出如下 URL：
1<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">该vite-imagetools插件期望 Vite 拦截输出 URL，然后插件可能会处理所有以 开头的 URL /@imagetools。如果您使用的插件期望此行为，则需要手动更正 URL。您可以在vite.config.js文件中使用transformOnServe选项执行此操作。
在这个特定的例子中，我们将把开发服务器 URL 添加到/@imagetools生成的代码中的所有出现位置：
1import { defineConfig } from 'vite'; 2import laravel from 'laravel-vite-plugin'; 3import { imagetools } from 'vite-imagetools'; 4 5export default defineConfig({ 6 plugins: [ 7 laravel({ 8 // ... 9 transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),10 }),11 imagetools(),12 ],13});现在，当 Vite 提供资产服务时，它将输出指向 Vite 开发服务器的 URL：
1- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">2+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">