后盾人

Appearance

资源打包 (Vite) ​

简介 ​

Vite 是一个现代的前端构建工具,它提供了极快的开发环境和打包生产代码的能力。在使用 Laravel 构建应用程序时,你通常会使用 Vite 来打包应用程序的 CSS 和 JavaScript 文件,生成可用于生产环境的资源。

Laravel 通过提供官方插件和 Blade 指令无缝集成了 Vite,可以在开发和生产环境中加载你的资源。

NOTE

你是否在运行 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 的官方指南。

安装与设置 ​

NOTE

以下文档讨论了如何手动安装和配置 Laravel Vite 插件。然而,Laravel 的起步套件已经包含了所有这些脚手架,是开始使用 Laravel 和 Vite 的最快方式。

安装 Node ​

在运行 Vite 和 Laravel 插件之前,你必须确保安装了 Node.js (16+) 和 NPM:

sh
node -v
npm -v

你可以轻松地从官方 Node 网站使用简单的图形安装程序安装最新版本的 Node 和 NPM。或者,如果你使用 Laravel Sail,你可以通过 Sail ���用 Node 和 NPM:

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

安装 Vite 和 Laravel 插件 ​

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

sh
npm install

配置 Vite ​

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

Laravel Vite 插件要求你为应用程序指定入口点。这些可以是 JavaScript 或 CSS 文件,包括预处理语言如 TypeScript、JSX、TSX 和 Sass。

js
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 入口点的情况下效果最佳:

js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', // [tl! remove]
            'resources/js/app.js',
        ]),
    ],
});

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

js
import './bootstrap';
import '../css/app.css'; // [tl! add]

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

使用安全的开发服务器 ​

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

如果你正在使用 Laravel Herd 并已保护站点,或者你正在使用 Laravel Valet 并对你的应用程序运行了 secure 命令,Laravel Vite 插件将自动检测并使用生成的 TLS 证书。

如果你使用与应用程序目录名称不匹配的主机保护了站点,你可以在应用程序的 vite.config.js 文件中手动指定主机:

js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', // [tl! add]
        }),
    ],
});

当使用其他 Web 服务器时,你应该生成一个受信任的证书并手动配置 Vite 使用生成的证书:

js
// ...
import fs from 'fs'; // [tl! add]

const host = 'my-app.test'; // [tl! add]

export default defineConfig({
    // ...
    server: { // [tl! add]
        host, // [tl! add]
        hmr: { host }, // [tl! add]
        https: { // [tl! add]
            key: fs.readFileSync(`/path/to/${host}.key`), // [tl! add]
            cert: fs.readFileSync(`/path/to/${host}.crt`), // [tl! add]
        }, // [tl! add]
    }, // [tl! add]
});

如果你无法为你的系统生成受信任的证书,你可以安装并配置 @vitejs/plugin-basic-ssl 插件。当使用不受信任的证书时,你需要在运行 npm run dev 命令时通过在控制台中跟随"Local"链接来接受 Vite 开发服务器的证书警告。

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

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

js
// ...

export default defineConfig({
    // ...
    server: { // [tl! add:start]
        hmr: {
            host: 'localhost',
        },
    }, // [tl! add:end]
});

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

加载你的脚本和样式 ​

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

blade
<!DOCTYPE html>
<head>
    {{-- ... --}}

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

如果你通过 JavaScript 导入 CSS,你只需要包含 JavaScript 入口点:

blade
<!DOCTYPE html>
<head>
    {{-- ... --}}

    @vite('resources/js/app.js')
</head>

@vite 指令将自动检测 Vite 开发服务器并注入 Vite 客户端以启用热模块替换。在构建模式下,该指令将加载你编译和版本化的资产,包括任何导入的 CSS。

如果需要,你还可以在调用 @vite 指令时指定编译资产的构建路径:

blade
<!doctype html>
<head>
    {{-- 给定的构建路径相对于公共路径。 --}}

    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

内联资产 ​

有时可能需要包含资产的原始内容,而不是链接到版本化的资产 URL。例如,当将 HTML 内容传递给 PDF 生成器时,你可能需要直接将资产内容包含到页面中。你可以使用 Vite 门面提供的 content 方法输出 Vite 资产的内容:

blade
@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 命令将对你的应用程序的资产进行版本控制和打包,为你部署到生产环境做好准备:

shell
# 运行 Vite 开发服务器...
npm run dev

# 构建和版本化生产环境的资产...
npm run build

如果你在 WSL2 上的 Sail 中运行开发服务器,你可能需要一些额外的配置选项。

使用 JavaScript ​

别名 ​

默认情况下,Laravel 插件提供了一个常见的别名,以帮助你快速上手并方便导入应用程序的资源:

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

你可以通过在 vite.config.js 配置文件中添加自己的别名来覆盖 '@' 别名:

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 插件:

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

然后你可以在 vite.config.js 配置文件中包含该插件。使用 Laravel 时,Vue 插件还需要一些额外的选项:

js
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: {
                    // Vue 插件将重写资产 URL,当在��文件组件中引用时,
                    // 指向 Laravel web 服务器。将此设置为 `null` 允许
                    // Laravel 插件相反地重写资产 URL 以指向 Vite 服务器。
                    base: null,

                    // Vue 插件将解析绝对 URL 并将其视为
                    // 磁盘上文件的绝对路径。将此设置为
                    // `false` 将保持绝对 URL 不变,以便它们可以
                    // 按预期引用 public 目录中的资产。
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

NOTE

Laravel 的起步套件已经包含了正确的 Laravel、Vue 和 Vite 配置。查看 Laravel Breeze 以获得使用 Laravel、Vue 和 Vite 最快的入门方式。

React ​

如果你想使用 React 框架构建前端,那么你还需要安装 @vitejs/plugin-react 插件:

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

然后你可以在 vite.config.js 配置文件中包含该插件:

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 指令。

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

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

NOTE

Laravel 的起步套件已经包含了正确的 Laravel、React 和 Vite 配置。查看 Laravel Breeze 以获得使用 Laravel、React 和 Vite 最快的入门方式。

Inertia ​

Laravel Vite 插件提供了一个方便的 resolvePageComponent 函数,帮助你解析 Inertia 页面组件。以下是在 Vue 3 中使用该辅助函数的示例;然而,你也可以在其他框架(如 React)中使用该函数:

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

NOTE

Laravel 的起步套件已经包含了正确的 Laravel、Inertia 和 Vite 配置。查看 Laravel Breeze 以获得使用 Laravel、Inertia 和 Vite 最快的入门方式。

URL 处理 ​

使用 Vite 并在应用程序的 HTML、CSS 或 JS 中引用资产时,需要考虑几个注意事项。首先,如果你使用绝对路径引用资产,Vite 不会将该资产包含在构建中;因此,你应该确保该资产在你的 public 目录中可用。在使用专用的 CSS 入口点时,你应该避免使用绝对路径,因为在开发过程中,浏览器会尝试从 Vite 开发服务器加载这些路径,而不是从你的公共目录。

在引用相对资产路径时,你应该记住路径是相对于引用它们的文件。通过相对路径引用的任何资产都将被 Vite 重写、版本化和打包。

考虑以下项目结构:

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

以下示例演示了 Vite 如何处理相对和绝对 URL:

html
<!-- 这个资产不由 Vite 处理,不会包含在构建中 -->
<img src="/taylor.png">

<!-- 这个资产将被 Vite 重写、版本化和打包 -->
<img src="../../images/abigail.png">

使用样式表 ​

你可以在 Vite 文档中了解更多关于 Vite 的 CSS 支持。如果你正在使用 PostCSS 插件,如 Tailwind,你可以在项目根目录创建一个 postcss.config.js 文件,Vite 将自动应用它:

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

NOTE

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 入口点中添加以下内容:

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

这些资产现在将在运行 npm run build 时被 Vite 处理。然后你可以在 Blade 模板中使用 Vite::asset 方法引用这些资产,该方法将返回给定资产的版本化 URL:

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

保存时刷新 ​

当你的应用程序使用传统的服务器端渲染和 Blade 构建时,Vite 可以通过在你对应用程序中的视图文件进行更改时自动刷新浏览器来改善你的开发工作流程。要开始使用,你可以简单地将 refresh 选项指定为 true。

js
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 生成应用程序前端的路由链接时很有用。

如果这些默认路径不适合你的需求,你可以指定自己的路径列表来监视:

js
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 定义:

js
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 方法中定义:

/**
 * 引导任何应用程序服务。
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

一旦定义了宏,就可以在模板中调用它。例如,我们可以使用上面定义的 image 宏来引用位于 resources/images/logo.png 的资产:

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

自定义基础 URL ​

如果你的 Vite 编译资产部署到与应用程序不同的域,例如通过 CDN,你必须在应用程序的 .env 文件中指定 ASSET_URL 环境变量:

php
ASSET_URL=https://cdn.example.com

配置资产 URL 后,所有重写的资产 URL 都将以配置的值为前缀:

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

请记住,Vite 不会重写绝对 URL,因此它们不会被加上前缀。

环境变量 ​

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

php
VITE_SENTRY_DSN_PUBLIC=http://example.com

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

js
import.meta.env.VITE_SENTRY_DSN_PUBLIC

在测试中禁用 Vite ​

Laravel 的 Vite 集成将尝试在运行测试时解析你的资产,这需要你运行 Vite 开发服务器或构建你的资产。

如果你更喜欢在测试期间模拟 Vite,你可以调用 withoutVite 方法,该方法适用于任何扩展 Laravel 的 TestCase 类的测试:

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

    // ...
});
php
use Tests\TestCase;

class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();

        // ...
    }
}

如果你想为所有测试禁用 Vite,你可以从基础 TestCase 类的 setUp 方法中调用 withoutVite 方法:

php
<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void// [tl! add:start]
    {
        parent::setUp();

        $this->withoutVite();
    }// [tl! add:end]
}

服务器端渲染 (SSR) ​

Laravel Vite 插件使得使用 Vite 设置服务器端渲染变得非常简单。要开始,请在 resources/js/ssr.js 创建一个 SSR 入口点,并通过向 Laravel 插件传递配置选项来指定入口点:

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 入口点,我们建议增强应用程序 package.json 中的 "build" 脚本以创建你的 SSR 构建:

json
"scripts": {
     "dev": "vite",
     "build": "vite build" // [tl! remove]
     "build": "vite build && vite build --ssr" // [tl! add]
}

然后,要构建和启动 SSR 服务器,你可以运行以下命令:

sh
npm run build
node bootstrap/ssr/ssr.js

如果你正在使用 Inertia 的 SSR,你可以使用 inertia:start-ssr Artisan 命令来启动 SSR 服务器:

sh
php artisan inertia:start-ssr

NOTE

Laravel 的起步套件已经包含了正确的 Laravel、Inertia SSR 和 Vite 配置。查看 Laravel Breeze 以获得使用 Laravel、Inertia SSR 和 Vite 最快的入门方式。

脚本和样式标签属性 ​

内容安全策略 (CSP) Nonce ​

如果你希望在脚本和样式标签上包含 nonce 属性作为内容安全策略的一部分,你可以在自定义中间件中使用 useCspNonce 方法生成或指定一个 nonce:

php
<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;

class AddContentSecurityPolicyHeaders
{
    /**
     * 处理传入的请求。
     *
     * @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 方法检索它:

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

如果你已经有一个 nonce 想要指示 Laravel 使用,你可以将 nonce 传递给 useCspNonce 方法:

php
Vite::useCspNonce($nonce);

子资源完整性 (SRI) ​

如果你的 Vite 清单包含资产的 integrity 哈希,Laravel 将自动在生成的任何脚本和样式标签上添加 integrity 属性,以强制执行子资源完整性。默认情况下,Vite 不在其清单中包含 integrity 哈希,但你可以通过安装 vite-plugin-manifest-sri NPM 插件来启用它:

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

然后你可以在 vite.config.js 文件中启用此插件:

js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';// [tl! add]

export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),// [tl! add]
    ],
});

如果需要,你还可以自定义可以找到完整性哈希的清单键:

php
use Illuminate\Support\Facades\Vite;

Vite::useIntegrityKey('custom-integrity-key');

如果你想完全禁用此自动检测,你可以将 false 传递给 useIntegrityKey 方法:

php
Vite::useIntegrityKey(false);

任意属性 ​

如果你需要在脚本和样式标签上包含其他属性,例如 data-turbo-track 属性,你可以通过 useScriptTagAttributes 和 useStyleTagAttributes 方法指定它们。通常,这些方法应该从服务提供者中调用:

php
use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // 为属性指定一个值...
    'async' => true, // 指定一个没有值的属性...
    'integrity' => false, // 排除一个原本会包含的属性...
]);

Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

如果你需要有条件地添加属性,你可以传递一个回调函数,它将接收资产源路径、其 URL、其清单块和整个清单:

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

WARNING

当 Vite 开发服务器运行时,$chunk 和 $manifest 参数将为 null。

高级自定义 ​

开箱即用,Laravel 的 Vite 插件使用对大多数应用程序都适用的合理约定;然而,有时你可能需要自定义 Vite 的行为。为了启用额外的自定义选项,我们提供了以下方法和选项,可以用来替代 @vite Blade 指令:

blade
<!doctype html>
<head>
    {{-- ... --}}

    {{
        Vite::useHotFile(storage_path('vite.hot')) // 自定义 "hot" 文件...
            ->useBuildDirectory('bundle') // 自定义构建目录...
            ->useManifestFilename('assets.json') // 自定义清单文件名...
            ->withEntryPoints(['resources/js/app.js']) // 指定入口点...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // 自定义构建资产的后端路径生成...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

在 vite.config.js 文件中,你应该指定相同的配置:

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

更正 Dev Server URL ​

Vite 生态系统中的一些插件假设以正斜杠开头的 URL 将始终指向 Vite 开发服务器。但是，由于 Laravel 集成的性质，情况并非如此。

例如，当 Vite 提供你的资源时，vite-imagetools 插件会输出如下 URL:

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

Tvite-imagetools 插件预期输出 URL 将被 Vite 拦截，然后插件可能会处理所有以 /@imagetools 开头的 URL。如果您使用的插件会预期这种行为，则需要手动更正 URL。您可以使用 transformOnServe 选项在 vite.config.js 文件中执行此操作。

在这个特定的示例中，我们将在生成的代码中所有出现的 /@imagetools 的 dev 服务器 URL 前面添加:

js
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:

html
- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! remove] -->
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! add] -->

后盾人版权所有 © 2018-2025 创作不易请尊重他人劳动成果，未经授权禁止转载！