Vite Vue3多应用配置：如何设置独立输出目录？

你当前的Vite配置写法有误，Rollup的output字段不支持按入口名单独指定输出目录，所以才会导致两个应用的构建产物混在一起。下面提供两种可行的解决办法：

方案一：使用Vite多配置数组（推荐） #

这种方式给每个应用单独配置一套构建规则，输出目录完全独立，后续维护和扩展更方便。修改vite.config.js如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig([
  // App1的独立配置
  {
    plugins: [vue()],
    build: {
      // 指定App1的输出目录
      outDir: 'dist/app1',
      rollupOptions: {
        input: 'path/to/main-app1.js'
      }
    }
  },
  // App2的独立配置
  {
    plugins: [vue()],
    build: {
      // 指定App2的输出目录
      outDir: 'dist/app2',
      rollupOptions: {
        input: 'path/to/main-app2.js'
      }
    }
  }
]);

执行vite build --watch时，Vite会依次构建两个应用，产物分别输出到dist/app1和dist/app2目录下。如果后续需要给某个应用单独添加插件、环境变量等配置，直接修改对应区块即可。

方案二：单配置下利用Rollup输出占位符 #

如果两个应用依赖高度复用，不想拆分配置，可以通过Rollup的路径占位符，让不同入口的产物自动归类到对应子目录：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        app1: 'path/to/main-app1.js',
        app2: 'path/to/main-app2.js'
      },
      output: {
        // 入口文件放到对应名称的子目录
        entryFileNames: '[name]/assets/[name].[hash].js',
        // 代码分割的chunk文件同理
        chunkFileNames: '[name]/assets/[name].[hash].js',
        // 静态资源按类型归类到对应子目录
        assetFileNames: '[name]/assets/[ext]/[name].[hash].[ext]',
        // 基础输出目录为dist
        dir: 'dist'
      }
    }
  }
});

这种配置会把App1的所有产物放到dist/app1下，App2的放到dist/app2下，公共依赖的chunk会被共享，适合依赖重叠度高的场景。

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