将 html 文件移出 dist vite 中的 src 文件夹

Question

我目前正在参与一个使用Vite作为构建工具的Vue.js项目。我的目标是调整 Vite 配置，使 HTML 文件直接位于“dist”文件夹中，在构建项目时位于“assets”文件夹旁边。目前，HTML 文件被放置在“dist”目录内的子文件夹中。这是我在 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()]
});

我的outdir看起来像这样：

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

如何使 outdir 看起来像这样：

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

？

Answer 1

据我了解，Vite 不会在多页面模式下更改 html 文件，因为它可能会与开发服务器发生冲突，根据 文档：

请注意，对于 HTML 文件，Vite 会忽略 rollupOptions.input 对象中为条目指定的名称，而是在 dist 文件夹中生成 HTML 资源时遵循文件的已解析 id。这确保了结构与开发服务器的工作方式一致。

---

常见的方法是将项目根目录更改为 src 文件夹，其缺点是您必须修复相对于根目录评估的其他路径，例如 dist 文件夹：

// vite.config.js
export default defineConfig({
  ...
  root: 'src',
  publicDir: '../public', // relative to root
  build: {
    outDir: '../dist/', // relative to root
    ...
  }
})

---

或者，您可以在简单的内联插件中手动更改 HTML 输出的文件名：

// vite.config.js
export default defineConfig({
  plugins: [
    ...
    {
      name: 'remove-src-dir-from-html-path',
      enforce: 'post',
      generateBundle(_,bundle) {
        const htmlFileInSrcFolderPattern = /src\/.*\.html/
        for (const outputItem of Object.values(bundle)) {
          if (!htmlFileInSrcFolderPattern.test(outputItem.fileName)) {
            continue
          }
          outputItem.fileName = outputItem.fileName.replace('src/', '')
        }
      }
    }
  ],

我更喜欢这个，因为尽管如此，它仍然比改变根感觉不那么脆弱。但我不确定它是否适合每个人。如果您遇到此问题，我很想知道它们是什么！