根据目录名称重命名输出文件

Question

我正在将我的多站点 Laravel 应用程序从 Mix 迁移到 Vite。使用 Mix，我根据目录名称重命名资产。用Vite可以吗？

我的混合代码：

const { readdirSync, statSync } = require("fs");
const { join } = require("path");

const dirs = (p) =>
  readdirSync(p).filter(
    (f) => statSync(join(p, f)).isDirectory();
  );

let brands = dirs("./brands");

brands.forEach((brand) => {
    mix.js(
      `brands/${brand}/resources/scripts/app.js`,
      `public/scripts/${brand}.js`
    ).vue();

    mix.sass(
      `brands/${brand}/resources/styles/app.scss`,
      `public/styles/${brand}.css`
    );
});

Answer 1

您可以通过根据目录结构动态配置其入口点来在 Vite 中实现此目的。Vite 允许通过其

vite.config.js

文件进行自定义，您可以在其中以编程方式设置构建的输入文件。

遵循的步骤：

1. 安装依赖项 确保您安装了 Vite 和任何必需的插件，例如用于 Vue 支持的

   @vitejs/plugin-vue

   。

   npm 安装 vite @vitejs/plugin-vue

2. 创建动态输入脚本 更新您的

   vite.config.js

   以动态配置

   build.rollupOptions.input

   字段的输入，类似于使用 Mix 的方式。

3. Vite中的动态目录解析 以下是如何配置 Vite 来处理基于目录的重命名逻辑：

   import vue from '@vitejs/plugin-vue';
   import { readdirSync, statSync } from 'fs';
   import { join, resolve } from 'path';
   
   // Helper function to get directories
   const dirs = (path) =>
     readdirSync(path).filter((file) => statSync(join(path, file)).isDirectory());
   
   // Get all brand directories
   const brands = dirs('./brands');
   
   // Build the input object for Vite
   const input = brands.reduce((entries, brand) => {
     entries[`scripts/${brand}`] = resolve(__dirname, `brands/${brand}/resources/scripts/app.js`);
     entries[`styles/${brand}`] = resolve(__dirname, `brands/${brand}/resources/styles/app.scss`);
     return entries;
   }, {});
   
   export default defineConfig({
     plugins: [vue()],
     build: {
       rollupOptions: {
         input, // Dynamically generated inputs
         output: {
           entryFileNames: 'scripts/[name].js',
           assetFileNames: 'styles/[name].css',
         },
       },
     },
   });```
   
   
   
   

4. 关键细节

• dirs

  功能：读取目录以识别品牌特定文件夹。

• input

  对象：将每个品牌的

  app.js

  和

  app.scss

  映射为 Rollup 的输入文件（由 Vite 在后台使用）。

• 自定义输出命名：使用

  entryFileNames

  中的

  assetFileNames

  和

  rollupOptions.output

  来控制输出文件结构。

5. 构建项目 运行Vite build命令生成资产。

   npm 运行构建