单页应用和多页应用

Vite的设计非常灵活，前面我们介绍过Vite的入口文件其实就是HTML。如果我们只有一个入口HTML并通过前端路由来控制页面内容，我们创建的就是单页应用（SPA），而Vite的入口文件也可以是多个，此时我们创建的就是多页应用（MPA）。

单页应用（SPA）

以React工程为例，我们可以直接安装react-router处理前端路由，同时Vite中只配置单一入口。

npm install react-router-dom@7 --save

vite.config.js配置文件中，我们仅在build.rollupOptions.input内配置单一入口index.html。这个单一入口配置其实是默认的，实际上你根本不需要改动vite.config.js配置文件，我们这里将其明确写出只是为了展示Vite中存在相关的配置选项。

import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  plugins: [react()],
});

此时我们就可以正常编写一个基于react-router的单页应用（SPA）了。下面是一个例子，我们的程序中包含两个路由，分别是/和/about。我们可以启动Vite的开发服务器观察效果。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "@/index.css";
import App from "@/App.jsx";
import About from "@/About.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" Component={App} />
        <Route path="/about" Component={About} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

多页应用（MPA）

对于多页应用（MPA），我们在build.rollupOptions.input配置多个入口即可。下面例子中，我们配置了index.html和about.html两个入口页面。

import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        about: resolve(__dirname, "about.html"),
      },
    },
  },
  plugins: [react()],
});

执行npm run build后，我们可以看到dist目录中也会输出index.html和about.html两个文件，配置到静态服务器后，两个页面也能如预期的被访问并正确加载自己的JavaScript脚本和CSS样式文件。

此外，Vite中同时使用前端路由和多页模式是完全可以的，但这需要你完全理解前端路由和服务端路由的工作流程，并仔细规划以避免冲突。