在 Vue 3 和 Vite 的单页面应用（SPA）中，改造为多页面应用（MPA）需要对项目结构和构建配置进行调整。Vite 提供了灵活的构建能力，可以通过配置支持多页面应用。以下是详细的改造步骤和实现方法：
一、项目结构调整
在 SPA 中，所有页面共享一个入口文件（通常是 main.js 或 main.ts）。而在 MPA 中，每个页面都有独立的入口文件。因此需要重新组织项目目录。
示例项目结构：
src/
├── pages/ # 存放多个页面的目录
│ ├── page1/ # 第一个页面
│ │ ├── main.js # 页面入口文件
│ │ ├── App.vue # 页面组件
│ │ └── assets/ # 页面资源
│ ├── page2/ # 第二个页面
│ │ ├── main.js
│ │ ├── App.vue
│ │ └── assets/
├── shared/ # 共享组件或工具
│ ├── components/
│ └── utils/
vite.config.js # Vite 配置文件
index.html # 默认 HTML 模板
二、配置 Vite 支持多页面应用
Vite 的多页面应用支持通过 build.rollupOptions.input 配置多个入口文件。我们需要修改 vite.config.js 文件。
示例配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';export default defineConfig({plugins: [vue()],build: {rollupOptions: {// 配置多页面入口input: {page1: path.resolve(__dirname, 'src/pages/page1/index.html'), // 第一个页面page2: path.resolve(__dirname, 'src/pages/page2/index.html'), // 第二个页面},},},
});
说明：
input是一个对象，键是页面名称，值是对应的 HTML 文件路径。- 每个页面的 HTML 文件可以单独定义，也可以复用同一个模板。
三、创建多页面的入口文件
每个页面都需要一个独立的入口文件（如 main.js），用于初始化 Vue 实例。
示例：page1/main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
示例：page2/main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
四、创建多页面的 HTML 文件
每个页面需要一个独立的 HTML 文件，作为页面的模板。
示例：page1/index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Page 1</title>
</head>
<body><div id="app"></div><script type="module" src="/src/pages/page1/main.js"></script>
</body>
</html>
示例：page2/index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Page 2</title>
</head>
<body><div id="app"></div><script type="module" src="/src/pages/page2/main.js"></script>
</body>
</html>
五、共享组件和样式
如果多个页面之间需要共享组件或样式，可以将它们提取到 shared/ 目录下，并在各页面中按需引入。
示例：共享组件
// src/shared/components/Button.vue
<template><button class="btn">{{ label }}</button>
</template><script>
export default {props: {label: String,},
};
</script>
在页面中使用：
import Button from '../../shared/components/Button.vue';export default {components: { Button },
};
示例：共享样式
/* src/shared/styles/global.css */
body {margin: 0;font-family: Arial, sans-serif;
}
在页面入口文件中引入：
import '../../shared/styles/global.css';
六、开发与构建
-
开发模式：
- 在开发模式下，Vite 会自动加载所有配置的入口文件。
- 启动开发服务器：
npm run dev - 访问不同页面时，URL 路径对应
input配置中的键名。例如：http://localhost:3000/page1对应page1。http://localhost:3000/page2对应page2。
-
生产模式：
- 构建项目：
npm run build - 构建完成后，
dist目录下会生成多个页面的静态文件，每个页面对应一个独立的子目录。
- 构建项目：
七、注意事项
-
路由管理：
- 如果每个页面需要独立的路由管理，可以在每个页面的入口文件中单独引入 Vue Router。
- 例如，
page1/router.js和page2/router.js分别管理各自的路由。
-
公共资源：
- 确保公共资源（如图片、字体等）在
public/目录下，避免重复加载。
- 确保公共资源（如图片、字体等）在
-
性能优化：
- 使用代码分割（Code Splitting）减少打包体积。
- 对公共依赖（如 Vue、Vue Router 等）启用缓存。
-
SEO 优化：
- 如果需要更好的 SEO 支持，可以结合服务端渲染（SSR）或静态站点生成器（如 VitePress）。
八、总结
通过上述步骤，我们可以将 Vue 3 + Vite 的单页面应用改造为多页面应用。关键在于：
- 项目结构的调整：为每个页面创建独立的入口文件和 HTML 模板。
- Vite 配置的修改：通过
rollupOptions.input配置多页面入口。 - 资源共享与优化：提取公共组件和样式，减少重复代码。
这种改造方式非常适合需要多页面结构的项目（如企业官网、管理后台等），同时保持了 Vite 的高性能和灵活性。