Laravel多站点应用从Mix迁移至Vite，如何按目录名重命名输出文件？

完全可以实现和Mix一样的按目录名重命名资源文件的功能，只需要在vite.config.js中通过Node.js的文件系统模块读取目录，再配置Vite的构建入口和输出规则即可。

具体实现步骤 #

1. 读取品牌目录：和你之前Mix的逻辑一致，用fs模块遍历brands下的子目录。
2. 配置Vite入口：为每个品牌的JS入口构建对应的配置项。
3. 自定义输出文件名：通过Rollup的输出配置，将JS和CSS文件按品牌名输出到指定目录。

以下是完整的vite.config.js代码：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { readdirSync, statSync } from 'fs';
import { join } from 'path';

// 获取brands目录下的所有子目录
const getBrandDirs = (dirPath) => {
  return readdirSync(dirPath).filter(file => statSync(join(dirPath, file)).isDirectory());
};

const brands = getBrandDirs('./brands');

// 构建Vite入口配置
const buildInputs = {};
brands.forEach(brand => {
  // 添加入口JS文件
  buildInputs[`scripts/${brand}`] = `./brands/${brand}/resources/scripts/app.js`;
  
  // 如果你的SCSS未在JS中引入，需要单独添加SCSS入口的话可以取消下面注释
  // buildInputs[`styles/${brand}`] = `./brands/${brand}/resources/styles/app.scss`;
});

export default defineConfig({
  plugins: [
    laravel({
      input: buildInputs,
      refresh: true,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        // 配置JS文件输出路径和命名
        entryFileNames: `scripts/[name].js`,
        // 配置CSS文件输出路径和命名
        assetFileNames: assetInfo => {
          if (assetInfo.name?.endsWith('.css')) {
            // 从chunk名称中提取品牌名，生成对应CSS文件名
            const brandName = assetInfo.chunk.name.split('/')[1];
            return `styles/${brandName}.css`;
          }
          // 其他资源（如图片、字体）按默认规则输出
          return `assets/[name].[hash][extname]`;
        },
      },
    },
  },
});

模板中引用资源 #

在Blade模板中，直接通过@vite指令引用对应品牌的资源即可，比如：

@vite(['scripts/brand1.js'])

如果你的CSS是通过JS入口引入的，Vite会自动关联加载对应的CSS文件，无需单独引用。

内容的提问来源于stack exchange，提问作者boszlo