Vite 的多输入答案

【问题标题】：Multiple Inputs with ViteVite 的多输入
【发布时间】：2022-08-20 20:15:39
【问题描述】：

使用 vite 构建我的应用程序时，我有多个输入。我的配置如下所示：

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin()
  ],
  build: {
    rollupOptions: {
      input: {
        test1: resolve(__dirname, \'/test1.html\'),
        test2: resolve(__dirname, \'/test2.html\')
      }
    }
  }
});

输出如下所示：

dist
|-test1.html
|-test2.html
|-assets

我真正想要的是这样的：

dist
|test1
  |-index.html
|test2
  |-index.html
|-assets

这可能吗？

谢谢

标签： javascript vite

【解决方案1】：

构建输出通常与输入文件的目录结构匹配，因此在您的情况下，您可以将这些文件移动到项目根目录下的相应目录中：

my-project/
 |- test1/
 | `- index.html
 `- test2/
   `- index.html

然后配置 Vite 的build.rollupOptions.input 指向这些文件：

// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  ⋮
  build: {
    rollupOptions: {
      input: {
        test1: resolve(__dirname, './test1/index.html'),
        test2: resolve(__dirname, './test2/index.html'),
      },
    },
  },
})

demo

【讨论】：

我知道这一点，但我想知道是否不可能不做这个“黑客”告诉 vite 每个代码我希望将 html 放在哪个目录中。有没有办法做到这一点？

【解决方案2】：

您可以使用属性名称来定义目标目录（请参阅docs）

...
: rollupOptions: {
    input: {
        'test1/index': resolve(__dirname, '/test1.html'),
        'test2/index': resolve(__dirname, '/test2.html')
    }
}

【讨论】：