多入口场景下如何配置Vite移除index文件的多余子目录

问题原因 #

你当前构建后出现重复login目录层级，是因为配置里build.outDir设为dist/login，同时rollupOptions.input指向login/index.html，Rollup默认会保留输入文件的目录结构，导致把login目录下的文件输出到dist/login/login路径下，形成了多余的子目录。

解决方案 #

调整Rollup的输出配置，取消输入文件的目录结构映射，让login/index.html直接输出到dist/login目录根节点。以下是两种可行的修改方式：

方式一：指定输出文件命名规则 #

import { resolve } from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  base: '/',
  plugins: [Vue(), VueRouter()],
  build: {
    outDir: 'dist/login',
    rollupOptions: {
      input: resolve(__dirname, 'login/index.html'),
      output: {
        // 直接将入口文件输出到outDir根目录，不保留原目录结构
        entryFileNames: '[name].html',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    },
  },
});

方式二：设置模块根目录 #

import { resolve } from 'path';
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  base: '/',
  plugins: [Vue(), VueRouter()],
  build: {
    outDir: 'dist/login',
    rollupOptions: {
      input: resolve(__dirname, 'login/index.html'),
      output: {
        // 将login目录设为模块根目录，其下文件直接输出到outDir
        preserveModulesRoot: 'login'
      }
    },
  },
});

效果验证 #

重新执行构建命令后，dist/login目录下将直接生成index.html及对应静态资源，不会再出现多余的login子目录，与你期望的目录结构一致。

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