包简介

A lightweight Symfony bundle that provides seamless Vite integration with automatic dev-server detection, manifest handling, and simple Twig helpers for loading compiled assets.

README 文档

README

A lightweight Symfony bundle that integrates Vite into your Symfony application. It automatically detects the Vite dev server, reads the production manifest, and exposes simple Twig globals for loading compiled assets.

Features

Automatic Vite dev server detection
Production manifest (manifest.json) parsing
Multiple independent build support (e.g. frontend / backend)
Symfony Asset VersionStrategyInterface integration
Twig globals (vite.dev, vite.devClient) for conditional script loading

Philosophy

This bundle resolves asset URLs through the Vite manifest and the Symfony Asset component — nothing more. It does not auto-generate <script>, <link>, or <link rel="modulepreload"> tags for you.

This is intentional. You stay in full control of your HTML: which assets to preload, where to place scripts, whether to add async, defer, crossorigin, or integrity attributes. The bundle gives you the correct URLs; you decide how to load them.

Requirements

PHP 8.4+
Symfony 6.4, 7.4, or 8.0

Installation

composer require fabricity/vite-bundle

Register the bundle in config/bundles.php:

return [
    // ...
    Fabricity\Bundle\ViteBundle\FabricityViteBundle::class => ['all' => true],
];

Vite Setup

Install Vite in your project:

npm install --save-dev vite

Create a vite.config.js at the root of your project:

import {defineConfig} from 'vite'

export default defineConfig({
    build: {
        manifest: true,
        outDir: 'public/build/frontend',
        rollupOptions: {
            input: 'assets/main.js',
        },
    },
    server: {
        origin: 'http://localhost:5173',
    },
})

Add the following scripts to your package.json:

{
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

Run npm run dev during development and npm run build for production.

Configuration

Create config/packages/fabricity_vite.yaml:

fabricity_vite:
    # Path to your public directory (default: %kernel.project_dir%/public)
    public_dir: '%kernel.project_dir%/public'

    # Vite dev server URL (omit in production)
    server: 'http://localhost:5173'

    # One entry per Vite build output
    builds:
        frontend:
            build_dir: build/frontend
            # manifest_path defaults to .vite/manifest.json
        backend:
            build_dir: build/backend

Each entry under builds registers a Symfony Asset version strategy service named fabricity_vite.version_strategy.<name>.

Multiple builds

You can define as many builds as you need. This is useful when you have separate Vite configs for different parts of your application.

Twig integration

The bundle registers a Twig extension that exposes a global vite variable:

Variable	Type	Description
`vite.dev`	`bool`	`true` when the Vite dev server is reachable
`vite.devClient`	`string\|null`	URL to the Vite HMR client (`/@vite/client`)

Use it in your base template to conditionally load the dev client:

{% if vite.dev %}
    <script type="module" src="{{ vite.devClient }}"></script>
{% endif %}

Asset version strategy

Register the bundle's version strategy on a Symfony Asset package in config/packages/assets.yaml:

framework:
    assets:
        packages:
            frontend:
                version_strategy: 'fabricity_vite.version_strategy.frontend'
            backend:
                version_strategy: 'fabricity_vite.version_strategy.backend'

Then use the standard Symfony asset() helper in Twig:

{# In dev mode: points to http://localhost:5173/src/main.js #}
{# In prod mode: resolves via manifest to /build/frontend/assets/main-abc123.js #}
<script type="module" src="{{ asset('src/main.js', 'frontend') }}"></script>
<link rel="stylesheet" href="{{ asset('src/main.css', 'frontend') }}">

CSS co-located with JS

When Vite bundles CSS alongside a JS entry point, you can reference the CSS file using its .css extension even though it is listed under a .js key in the manifest:

<link rel="stylesheet" href="{{ asset('src/app.css', 'frontend') }}">

The bundle automatically resolves src/app.css → src/app.js → css[0] from the manifest.

Full example

{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{{ asset('src/main.css', 'frontend') }}">
</head>
<body>
    {% block body %}{% endblock %}

    {% if vite.dev %}
        <script type="module" src="{{ vite.devClient }}"></script>
    {% endif %}
    <script type="module" src="{{ asset('src/main.js', 'frontend') }}"></script>
</body>
</html>

License

MIT — see LICENSE.

fabricity/vite-bundle 适用场景与选型建议

fabricity/vite-bundle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 0 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 05 月 09 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「vite」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 fabricity/vite-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 fabricity/vite-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 fabricity/vite-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 fabricity/vite-bundle 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

idleberg/wordpress-vite-assets 149

Injects assets from a Vite manifest to the Wordpress head, supports themes and plugins

carbdrox/pimcore-vite-bundle 2

Pimcore Vite integration

based/sugar 73

Minimal Laravel authentication scaffolding with Vue, Vite, Typescript and Tailwind.

wazum/typo3-live-reload 4

Live-reloads the open frontend tabs affected by a content or source-file change, using TYPO3 cache tags and rendered-file tags to reload only the affected tabs.

wu/giorgio-spa 8

laravel vue spa

guihigashi/simple-vite-laravel 1

A Blade directive for Vite/React assets

fabricity/vite-bundle

包简介

关键字：