1. 创建页面目录和入口文件
在项目根目录下创建多个页面目录,例如 page1、page2 等。
在每个页面目录中创建对应的入口文件,如 page1/index.html、page2/index.html 。
2. 配置 Vite
在 vite.config.js 文件中进行配置。
import { defineConfig } from "vite";
export default defineConfig({
build: {
rollupOptions: {
input: {
main: "./index.html",
page1: "./page1/index.html",
page2: "./page2/index.html",
},
},
},
});
3. 页面模板和脚本
在每个 index.html 文件中,可以引入对应的 JavaScript 脚本和其他资源。
例如,在 `page1/index.html` 中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page 1</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
通过这样的配置,Vite 就能够处理多个页面,并为每个页面进行相应的构建和开发服务。