Vite.js 构建：如果我的条目命名不同，如何生成输出index.html

Question

我有几个入口点

app1.html

、

app2.html

、 构建时我只需要一次构建一个（通过拥有多个

vite{x}.config.ts

文件）

我如何告诉vite/rollup在

index.html

文件夹中输出

app1.html

（而不是

dist

）

我当前的配置如下所示：

...
return {
  build: {
    rollupOptions: {
      input: resolve(__dirname, 'app1.html'),
      output: // something needs to go here
    }
 }
} 

无论我在

output

中放入什么，

dist

文件夹都包含与我的入口点完全相同的html文件，我需要它是

index.html

概括地说：我希望能够通过构建来拥有多个条目html文件（及其各自的vite配置文件），这些文件应该生成带有自己的

dist

的

index.html

文件夹

Answer 1

output

应该是具有

file

属性

的对象

https://rollupjs.org/guide/en/#configuration-files

rollupOptions: {
  input: resolve(__dirname, 'app1.html'),
  output: {
    file: "index.html",
    //format: "html", // might need this
  }
}

Answer 2

defineConfig({
    build: {
      rollupOptions: {
        input: {
          app: 'your_html_name.html',
        },
      },
    },
    plugins: [
      createHtmlPlugin({
        template: 'your_html_name.html',
      }),
      {
        name: "vite-postbuild",
        closeBundle: async () => {
          const buildDir = path.join(__dirname, "dist");
          const oldPath = path.join(buildDir, 'your_html_name.html');
          const newPath = path.join(buildDir, "index.html");

          await fs.rename(oldPath, newPath);
        },
      },
    ],
  });