Vue3+Vite单页面应用(SPA)改造为多页面应用(MPA)

在 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）。