ai问答：使用vite如何配置多入口页面-526互联

Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用。要在 Vite 中配置多入口,可以:

在 vite.config.js 中定义多个 entry 入口:

export default {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        other: resolve(__dirname, 'other.html')
      }
    }
  }
}

为每个 HTML 文件定义一个模板,使用和标记模板内容:
index.html

<!DOCTYPE html>
<html>
  <!-- region -->
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello from Index!</h1>
  </body> 
  <!-- endregion -->
</html>

other.html

<!DOCTYPE html>
<html>
  <!-- region -->
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello from Other!</h1>
  </body>
  <!-- endregion --> 
</html>

运行 vite build,Vite 会识别模板并生成独立的 HTML 文件:
dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello from Index!</h1>
    <script type="module" src="/src/main.js"></script>
  </body> 
</html>

dist/other.html

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello from Other!</h1>
    <script type="module" src="/src/other.js"></script>
  </body>
</html>

每个 HTML 会自动引入对应名称的 JS 入口文件。