在 Vue 开发中，默认创建的项目通常是单页面应用（SPA）。然而，在某些特定场景下，我们可能需要将其改造成多页面应用（MPA）以满足不同的业务需求。以下是详细的改造步骤，以通过 Vue CLI 创建的项目为例进行说明。
1. 创建项目
在开始之前，请确保你已经正确安装了 npm（推荐 node.js v20+）。安装完成后，我们可以使用以下命令创建一个新的 Vue 项目：
npm create vue@latest
# 按照脚手架的提示信息，创建一个名称为 my-mpa-project 的项目，创建完成后进入该项目目录
cd my-mpa-project
2. 配置多页面
2.1 新增目录结构
为了支持多个静态页面，我们需要创建一个新的目录 src/pages/。接着，将 index.html、src/App.vue 和 src/main.js 文件移动到 src/pages/index/ 目录下。在移动文件后，需要调整页面中的组件引用地址，确保所有引用的地址都是正确的。以下是修改后的 index.html 文件示例：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/index/main.js"></script>
</body>
</html>
2.2 创建一个新页面
为了实现多页面应用，我们可以复制 src/pages/index 目录到 src/pages/about 目录。复制完成后，需要调整 about 目录下 index.html 文件中的 script 地址，使其指向正确的 main.js 文件。调整后的 index.html 文件内容如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我们</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/about/main.js"></script>
</body>
</html>
2.3 集成多页面插件
为了更好地管理多页面应用，我们需要集成一个多页面插件。这里我们使用 vite-plugin-mpa 插件，可以通过以下命令进行安装：
npm install -D vite-plugin-mpa
安装完成后，需要修改 vite.config.js 文件，添加与多页面应用相关的配置代码。具体代码如下：
import mpa from 'vite-plugin-mpa';
export default defineConfig({
base: '/',
plugins: [
...
mpa.default({
open: 'index/index.html',
scanDir: 'src/pages',
scanFile: 'main.js',
filename: 'index.html',
}),
],
})
3. 多页面路由支持（可选）
如果你的项目需要不同的页面使用不同的路由，可以将 src/router/index.js 文件复制为 indexRouter.js 和 aboutRouter.js，并分别用于不同的页面。复制完成后，需要同步调整页面 main.js 文件中的路由引用地址，确保路由的正确使用。
4. 运行和构建项目
4.1 运行项目
使用以下命令运行项目：
npm run dev
项目运行后，你可以通过 http://localhost:5173/index/ 和 http://localhost:5173/about/ 访问不同的页面，检查多页面应用是否正常工作。
4.2 构建项目
当项目开发完成后，需要进行构建以生成生产环境所需的文件。使用以下命令进行项目构建：
npm run build
构建完成后，在 dist 目录下会生成多个 HTML 文件目录，这些目录包含了多页面应用的静态文件。
通过以上步骤，你就可以将 Vue 的单页面应用成功改造成多页面应用。
项目地址源码：github.com/midfar/my-m…
在线示例：
