Vite：配置多个条目和具体输出结构

Question

我最终在一些小应用程序上从 Webpack 迁移到了 Vite。但我正在尝试找出一种方法，为包含其余应用程序的父目录进行 vite 配置。这是源文件的结构 -

├── package.json
├── vite.config.js
└── app1
    ├── vite.config.js
    ├── index.html
    └── src
        ├── main.jsx
        └── ...
└── app2
    ├── vite.config.js
    ├── index.html
    └── src
        ├── main.jsx
        └── ...

and so on

此类具有配置的父目录的唯一需要是立即构建所有嵌套应用程序并获得以下输出结构 -

├── dist
    └── app1
        ├── build.js
        ├── index.html
        └── assets
           ├── css, fonts and images files
    └── app1
        ├── build.js
        ├── index.html
        └── assets
           ├── css, fonts and images files

我无法正确获取父文件的配置。经过多次修改，感谢多页应用程序文档和一些在线资源，这就是我现在所处的位置，但 rollupOptions 中的输出部分仍然是一个缺失 -

import { defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react-swc';

const apps= ['app1', 'app2'];

const entries = {};
apps.forEach(app=> entries[app] = resolve(__dirname, `${app}/src/main.jsx`));

// https://vitejs.dev/config/
export default defineConfig({
    base: '',
    plugins: [react()],
    server: {
        host: 'localhost',
        port: 9015,
        open: true,
    },
    build: {
        rollupOptions: {
            input: { ...entries },
            output: {
                entryFileNames:'[name]/build.js',
                chunkFileNames: '[name].js',
                assetFileNames: '[name]/assets/[name].[ext]',
                manualChunks: undefined,
            },
        },
    },

    clean: true,
    outDir: resolve(__dirname, 'dist'),
});

如果您能提供任何帮助或指导来正确配置，我将不胜感激。提前致谢！而且 Vite 太棒了！！

Answer 1

您的目标是构建每个应用程序并将其输出放在 dist 文件夹内的单独目录中。父目录中的

vite.config.js

应该可以处理这种情况。

您当前的配置似乎很接近，但是您的

rollupOptions

中的输出部分存在问题。要实现所需的输出结构，您需要在

dir

对象中自定义

output

选项。以下是修改父目录中的

vite.config.js

的方法：

import { defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react-swc';

const apps = ['app1', 'app2'];

const entries = {};
apps.forEach(app => (entries[app] = resolve(__dirname, 
`${app}/src/main.jsx`)));

export default defineConfig({
  base: '',
  plugins: [react()],
  server: {
    host: 'localhost',
    port: 9015,
    open: true,
  },
  build: {
    rollupOptions: {
      input: { ...entries },
      output: {
        // Use the dir option to output to separate directories for eachapp
        dir: resolve(__dirname, 'dist'),
        entryFileNames: '[name]/build.js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name]/assets/[name].[ext]',                
        manualChunks: undefined,
      },
    },
  },
  clean: true,
});

我所做的主要改变是：

• 我将

  dir

  属性添加到

  output

  对象。这告诉 Vite 在哪里 输出构建的文件。
• 我将

  entryFileNames

  属性更改为 使用

  [name]/build.js

  格式。这将创建一个单独的构建 每个应用程序的文件。
• 我更改了

  chunkFileNames

  属性以使用

  [name].js

  格式。这将为每个创建一个单独的块文件 应用程序。
• 我更改了

  assetFileNames

  属性以使用

  [name]/assets/[name].[ext]

  格式。这将创建一个单独的资产 每个应用程序的目录。

此配置将构建每个应用程序，并将其资产、块和条目文件输出到 dist 文件夹内的单独目录中。