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 入口文件。
