主页 / coding / 问题 / 79297922
Accepted
boszlo
Asked: 2024-12-21 01:02:22 +0800 CST

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

  • 772

我正在将多站点 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`
    );
});
laravel

1 个回答

  1. Best Answer

    您可以在 Vite 中通过根据目录结构动态配置其入口点来实现这一点。Vite 允许通过其vite.config.js文件进行自定义，您可以在其中以编程方式设置构建的输入文件。

    请遵循以下步骤：

    1. 安装依赖项确保您已安装 Vite 和任何所需的插件，例如@vitejs/plugin-vueVue 支持。

      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控制输出文件结构。

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

      npm 运行构建

    • 1

相关问题