如何调整Vite配置，使HTML文件直接生成在dist根目录对应子文件夹？

问题描述 #

我正在开发一个使用Vite作为构建工具的Vue.js项目，需要调整Vite配置，让构建后的HTML文件直接位于dist文件夹中，与assets文件夹同级。当前HTML文件被放置在dist目录的src子文件夹内。

当前Vite配置 #

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

export default defineConfig({
  publicDir: false,
  build: {
    outDir: resolve(__dirname, 'dist'),
    emptyOutDir: true,
    rollupOptions: {
      input: {
        login: resolve(__dirname, 'src/login/login.html'),
        cadastro: resolve(__dirname, 'src/cadastro/cadastro.html'),
        home: resolve(__dirname, 'src/home/home.html')
      }
    }
  },
  plugins: [vue()]
});

当前dist目录结构 #

dist/
├── assets/
│   ├── cadastro-118e7637.css
│   ├── cadastro-669bfe7b.js
│   ├── home-7dbac266.js
│   ├── home-a84cd419.css
│   ├── login-572efaa1.css
│   ├── login-9a4f8a3b.js
│   ├── modulepreload-polyfill-3cfb730f.js
│   └── runtime-dom.esm-bundler-4af65d94.js
└── src/
    ├── cadastro/
    │   └── cadastro.html
    ├── home/
    │   └── home.html
    └── login/
        └── login.html

期望的dist目录结构 #

dist/
├── assets/
│   ├── cadastro-118e7637.css
│   ├── cadastro-669bfe7b.js
│   ├── home-7dbac266.js
│   ├── home-a84cd419.css
│   ├── login-572efaa1.css
│   ├── login-9a4f8a3b.js
│   ├── modulepreload-polyfill-3cfb730f.js
│   └── runtime-dom.esm-bundler-4af65d94.js
├── cadastro/
│   └── cadastro.html
├── home/
│   └── home.html
└── login/
    └── login.html

解决方案 #

你可以通过以下两种方法实现目标：

方法一：配置Rollup的模块根目录 #

在rollupOptions中添加output配置，设置preserveModulesRoot为'src'，Rollup会将src目录视为模块根目录，输出时自动去掉src前缀：

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

export default defineConfig({
  publicDir: false,
  build: {
    outDir: resolve(__dirname, 'dist'),
    emptyOutDir: true,
    rollupOptions: {
      input: {
        login: resolve(__dirname, 'src/login/login.html'),
        cadastro: resolve(__dirname, 'src/cadastro/cadastro.html'),
        home: resolve(__dirname, 'src/home/home.html')
      },
      output: {
        preserveModulesRoot: 'src'
      }
    }
  },
  plugins: [vue()]
});

方法二：修改输入入口的key值 #

直接将input对象的key改为目标输出路径，Rollup会根据key生成对应的目录结构：

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

export default defineConfig({
  publicDir: false,
  build: {
    outDir: resolve(__dirname, 'dist'),
    emptyOutDir: true,
    rollupOptions: {
      input: {
        'login/login': resolve(__dirname, 'src/login/login.html'),
        'cadastro/cadastro': resolve(__dirname, 'src/cadastro/cadastro.html'),
        'home/home': resolve(__dirname, 'src/home/home.html')
      }
    }
  },
  plugins: [vue()]
});

两种方法都能实现你期望的目录结构，任选其一即可。

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