README

确保全局已安装 Composer，如 Composer 文档中的安装章节所述。

使用 Symfony Flex 的应用程序

此包目前不支持 Symfony Flex。

不使用 Symfony Flex 的应用程序

步骤 1：下载包

打开命令行，进入您的项目目录，执行以下命令以下载此包的最新稳定版本

composer require viaevista/vite-bundle

步骤 2：启用包

然后，通过将其添加到项目 config/bundles.php 文件中注册的包列表中启用该包

// config/bundles.php

return [
    // ...
    Viaevista\ViteBundle\ViaevistaViteBundle::class => ['all' => true],
];

步骤 3：配置包

在您的 config/packages 目录中创建一个 viaevista_vite.yaml 文件，并配置包以匹配您的 Vite.js 设置。

viaevista_vite:
    server:
        # Enable or disable the server mode
        use_server_mode: '%env(bool:ENABLE_VITE_SERVER)%'
        # The host of your Vite.js when development server is running
        host: 'https://:5173'
    
    # The base path configured in your Vite.js config
    base_path: '/build/'

步骤 4：定义环境变量

在您的 .env 文件中，定义 VITE_SERVER_MODE 变量以启用或禁用服务器模式。

当您使用 vite.js 开发服务器时设置为 1，当您已构建资产时设置为 0。

ENABLE_VITE_SERVER=0

步骤 5：配置 Vite.js

在您的 Symfony 项目的根目录中添加一个 vite.config.js 文件，以下是最小配置，适用于任何 Vite.js 项目。

import { defineConfig } from 'vite'

const sourcesFolder = './assets';
const basePath = 'build';
const input = {
    'app.js': `${sourcesFolder}/app.js`,
};

export default defineConfig({
    root: sourcesFolder,
    base: `/${basePath}/`,
    envDir: '../',
    build: {
        manifest: true,
        outDir: `../public/${basePath}`,
        rollupOptions: {
            input,
        },
    },
});

将 sourcesFolder、basePath 和 input 修改为与您的项目匹配。

• sourcesFolder 是要编译的 Js 和 CSS 文件所在的位置。这通常是 Symfony 项目的 assets 文件夹。
• basePath 是 Vite.js 将输出编译后的资产的文件夹。 这应与 viaevista_vite.yaml 文件中的 base_path 配置相匹配。
• 在 input 中添加应用程序的入口点
  • 键是输入名称（在 Twig 视图中使用 vite 标签的名称）和值是文件的路径。

在构建资产时，编译的文件应位于 Symfony 的 public 文件夹下，以便由 Web 服务器提供。