资产捆绑 (Vite)

介绍
安装和设置
运行 Vite
使用 JavaScript
- 别名
- Vue
- React
- Inertia
- URL 处理
使用样式表
使用 Blade 和路由
资产预取
自定义基本 URL
环境变量
在测试中禁用 Vite
服务器端渲染 (SSR)
脚本和样式标签属性
高级自定义
- 更正开发服务器 URL

介绍

Vite 是一种现代的前端构建工具，它提供了极快的开发环境，并可以将您的代码捆绑到生产环境中。在使用 Laravel 构建应用程序时，您通常会使用 Vite 将应用程序的 CSS 和 JavaScript 文件捆绑到可用于生产环境的资产中。

Laravel 通过提供一个官方插件和 Blade 指令来无缝集成 Vite，以便在开发和生产环境中加载您的资产。

您是否在运行 Laravel Mix？Vite 已在新的 Laravel 安装中取代了 Laravel Mix。有关 Mix 文档，请访问 Laravel Mix 网站。如果您想切换到 Vite，请参阅我们的迁移指南。

在 Vite 和 Laravel Mix 之间选择

在过渡到 Vite 之前，新的 Laravel 应用程序使用 Mix（由 webpack 提供支持）来捆绑资产。Vite 侧重于在构建丰富的 JavaScript 应用程序时提供更快、更有效率的体验。如果您正在开发单页面应用程序 (SPA)，包括使用诸如 Inertia 之类的工具开发的应用程序，Vite 将是完美的解决方案。

Vite 还与传统的服务器端渲染应用程序配合使用，这些应用程序带有 JavaScript “点缀”，包括使用 Livewire 的应用程序。但是，它缺少 Laravel Mix 支持的一些功能，例如将不在您的 JavaScript 应用程序中直接引用的任意资产复制到构建中的功能。

迁移回 Mix

您是否使用我们的 Vite 脚手架启动了一个新的 Laravel 应用程序，但需要迁移回 Laravel Mix 和 webpack？没问题。请参阅我们的关于从 Vite 迁移到 Mix 的官方指南。

安装和设置

以下文档讨论了如何手动安装和配置 Laravel Vite 插件。但是，Laravel 的入门套件已经包含了所有这些脚手架，它们是开始使用 Laravel 和 Vite 的最快方法。

安装 Node

在运行 Vite 和 Laravel 插件之前，您必须确保已安装 Node.js (16+) 和 NPM。

node -v
npm -v

您可以轻松地从官方 Node 网站使用简单的图形安装程序安装最新版本的 Node 和 NPM。或者，如果您使用的是 Laravel Sail，您可以在 Sail 中调用 Node 和 NPM。

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

安装 Vite 和 Laravel 插件

在 Laravel 的全新安装中，您将在应用程序目录结构的根目录中找到一个 package.json 文件。默认的 package.json 文件已经包含了开始使用 Vite 和 Laravel 插件所需的一切。您可以通过 NPM 安装应用程序的前端依赖项。

npm install

配置 Vite

Vite 通过项目根目录中的 vite.config.js 文件进行配置。您可以根据需要自由地自定义此文件，也可以安装应用程序所需的任何其他插件，例如 @vitejs/plugin-vue 或 @vitejs/plugin-react。

Laravel Vite 插件要求您指定应用程序的入口点。这些可以是 JavaScript 或 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',
        ]),
    ],
});

相反，您应该通过 JavaScript 导入 CSS。通常，这将在应用程序的 resources/js/app.js 文件中完成。

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

Laravel 插件还支持多个入口点和高级配置选项，例如 SSR 入口点。

使用安全的开发服务器

如果您的本地开发 Web 服务器通过 HTTPS 提供应用程序，您可能会遇到连接到 Vite 开发服务器的问题。

如果您使用的是 Laravel Herd 并已保护网站，或者您使用的是 Laravel Valet 并已针对您的应用程序运行 secure 命令，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', 
        }),
    ],
});

使用其他 Web 服务器时，您应该生成受信任的证书，并手动配置 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 插件。在使用不受信任的证书时，您需要在运行 npm run dev 命令时，通过遵循控制台中“本地”链接，在浏览器中接受 Vite 开发服务器的证书警告。

在 Sail 上的 WSL2 中运行开发服务器

在 Laravel Sail 上的 Windows Subsystem for Linux 2 (WSL2) 中运行 Vite 开发服务器时，您应该将以下配置添加到您的 vite.config.js 文件中，以确保浏览器可以与开发服务器通信。

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

如果在开发服务器运行时，您的文件更改未反映在浏览器中，您可能还需要配置 Vite 的 server.watch.usePolling 选项。

加载您的脚本和样式

配置好 Vite 入口点后，您现在可以在应用程序的根模板的 <head> 中添加的 @vite() Blade 指令中引用它们。

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

如果您通过 JavaScript 导入 CSS，则只需要包含 JavaScript 入口点。

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

@vite 指令会自动检测 Vite 开发服务器，并注入 Vite 客户端以启用热模块替换。在构建模式下，该指令将加载已编译和版本化的资产，包括任何导入的 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 资产的内容。

@use('Illuminate\Support\Facades\Vite')
 
<!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 中运行开发服务器，您可能需要一些额外的配置选项。

使用 JavaScript

别名

默认情况下，Laravel 插件提供了一个通用别名，可以帮助您快速上手，并方便地导入应用程序的资产。

{
    '@' => '/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 插件与 Laravel 配合使用时，还需要一些额外的选项。

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 的入门套件已经包含了正确的 Laravel、Vue 和 Vite 配置。查看 Laravel Breeze，了解使用 Laravel、Vue 和 Vite 入门的最快方法。

React

如果您想使用 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 扩展名，并记住在需要时更新您的入口点，如上面所示。

您还需要在现有的 @vite 指令旁边包含额外的 @viteReactRefresh Blade 指令。

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

@viteReactRefresh 指令必须在 @vite 指令之前调用。

Laravel 的入门套件已经包含了正确的 Laravel、React 和 Vite 配置。查看 Laravel Breeze，了解使用 Laravel、React 和 Vite 入门的最快方法。

Inertia

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 }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

如果您在 Inertia 中使用 Vite 的代码拆分功能，我们建议您配置资源预取。

Laravel 的入门套件已经包含了正确的 Laravel、Inertia 和 Vite 配置。查看 Laravel Breeze，了解使用 Laravel、Inertia 和 Vite 入门的最快方法。

URL 处理

在使用 Vite 并引用应用程序 HTML、CSS 或 JS 中的资源时，需要考虑以下几个注意事项。首先，如果您使用绝对路径引用资源，Vite 不会将资源包含在构建中；因此，您应该确保资源在您的 public 目录中可用。使用专用 CSS 入口点时，应该避免使用绝对路径，因为在开发期间，浏览器会尝试从 Vite 开发服务器加载这些路径（CSS 所在的位置），而不是从您的 public 目录加载。

引用相对资源路径时，请记住路径是相对于引用它们的文件的。通过相对路径引用的任何资源都将被 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">

使用样式表

您可以在 Vite 文档中详细了解 Vite 的 CSS 支持。如果您使用的是 PostCSS 插件（如 Tailwind），可以在项目的根目录中创建一个 postcss.config.js 文件，Vite 将自动应用它。

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

Laravel 的入门套件已经包含了正确的 Tailwind、PostCSS 和 Vite 配置。或者，如果您想在不使用我们入门套件的情况下使用 Tailwind 和 Laravel，请查看 Tailwind 的 Laravel 安装指南。

使用 Blade 和路由

使用 Vite 处理静态资产

在 JavaScript 或 CSS 中引用资源时，Vite 会自动处理和版本化这些资源。此外，在构建基于 Blade 的应用程序时，Vite 还可以处理和版本化您仅在 Blade 模板中引用的静态资源。

但是，为了实现这一点，您需要让 Vite 了解您的资源，方法是将静态资源导入应用程序的入口点。例如，如果您想处理和版本化存储在 resources/images 中的所有图像和存储在 resources/fonts 中的所有字体，则应在应用程序的 resources/js/app.js 入口点中添加以下内容。

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

这些资源现在将在运行 npm run build 时由 Vite 处理。然后，您可以使用 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/Livewire/**
app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

观察 routes/** 目录对于使用 Ziggy 在应用程序前端生成路由链接很有用。

如果这些默认路径不符合您的需求，您可以指定自己的路径列表以进行观察。

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 }
            }],
        }),
    ],
});

别名

在 JavaScript 应用程序中，通常会创建别名以便于定期引用目录。但是，您也可以使用 Illuminate\Support\Facades\Vite 类的 macro 方法创建别名，以便在 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">

资产预取

在使用 Vite 的代码拆分功能构建 SPA 时，所需资源将在每次页面导航时获取。这种行为会导致 UI 渲染延迟。如果这对您选择的任何前端框架来说是个问题，Laravel 提供了在初始页面加载时急切地预取应用程序的 JavaScript 和 CSS 资源的能力。

您可以通过在服务提供程序的 boot 方法中调用 Vite::prefetch 方法来指示 Laravel 急切地预取您的资源。

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Vite;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Vite::prefetch(concurrency: 3);
    }
}

在上面的示例中，资源将在每次页面加载时最多以 3 个并发下载进行预取。您可以修改并发度以满足应用程序的需求，或者如果应用程序应该一次性下载所有资源，则可以指定不限并发度。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch();
}

默认情况下，预取将在页面加载事件触发时开始。如果您想自定义预取开始的时间，可以指定 Vite 将监听的事件。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch(event: 'vite:prefetch');
}

鉴于上面的代码，预取现在将在您在 window 对象上手动分派 vite:prefetch 事件时开始。例如，您可以在页面加载后三秒钟开始预取。

<script>
    addEventListener('load', () => setTimeout(() => {
        dispatchEvent(new Event('vite:prefetch'))
    }, 3000))
</script>

自定义基本 URL

如果您的 Vite 编译的资源部署到与您的应用程序不同的域（例如通过 CDN），您必须在应用程序的 .env 文件中指定 ASSET_URL 环境变量。

ASSET_URL=https://cdn.example.com

配置资源 URL 后，所有重新编写的资源 URL 都将以配置的值为前缀。

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

请记住，Vite 不会重新编写绝对 URL，因此不会添加前缀。

环境变量

您可以通过在应用程序的 .env 文件中以 VITE_ 为前缀来将环境变量注入 JavaScript。

VITE_SENTRY_DSN_PUBLIC=http://example.com

您可以通过 import.meta.env 对象访问注入的环境变量。

import.meta.env.VITE_SENTRY_DSN_PUBLIC

在测试中禁用 Vite

Laravel 的 Vite 集成将尝试在运行测试时解析您的资源，这要求您运行 Vite 开发服务器或构建您的资源。

如果您希望在测试期间模拟 Vite，可以调用 withoutVite 方法，该方法适用于扩展 Laravel 的 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，可以从基本 TestCase 类的 setUp 方法中调用 withoutVite 方法。

<?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 设置服务器端渲染变得轻而易举。要开始使用，请在 resources/js/ssr.js 中创建一个 SSR 入口点，并通过将配置选项传递给 Laravel 插件来指定入口点。

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 入口点，我们建议您扩展应用程序的 package.json 中的 "build" 脚本以创建 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

Laravel 的入门套件已经包含了正确的 Laravel、Inertia SSR 和 Vite 配置。查看 Laravel Breeze，了解使用 Laravel、Inertia SSR 和 Vite 入门的最快方法。

脚本和样式标签属性

内容安全策略 (CSP) 随机数

如果您希望在脚本和样式标签中包含 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 方法后，Laravel 将自动在所有生成的脚本和样式标签中包含 nonce 属性。

如果您需要在其他地方指定 nonce，包括 Laravel 的入门套件中包含的 Ziggy @route 指令，可以使用 cspNonce 方法检索它。

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

如果您已经有一个希望指示 Laravel 使用的 nonce，可以将 nonce 传递给 useCspNonce 方法。

Vite::useCspNonce($nonce);

子资源完整性 (SRI)

如果您的 Vite 清单包含资源的 integrity 哈希，Laravel 将自动在它生成的任何脚本和样式标签中添加 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。

高级自定义

默认情况下，Laravel 的 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 开发服务器。但是，由于 Laravel 集成的性质，情况并非如此。

例如，vite-imagetools 插件在 Vite 正在提供您的资源时输出以下 URL。

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

vite-imagetools 插件期望输出的 URL 会被 Vite 拦截，然后插件可以处理所有以 /@imagetools 开头的 URL。如果您使用的是期望这种行为的插件，则需要手动更正 URL。您可以在 vite.config.js 文件中使用 transformOnServe 选项来实现这一点。

在这个具体的例子中，我们将开发服务器 URL 添加到生成的代码中所有 /@imagetools 的前面。

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 正在提供资源时，它将输出指向 Vite 开发服务器的 URL。

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