本文深入讲解如何使用 Vite 构建 Vue 多页面应用（MPA），涵盖核心原理、完整配置步骤、实战代码示例以及常见坑点与性能优化建议，帮助开发者高效落地多页面...
在构建具有多个独立页面的 Vue 应用时，传统的单页应用（SPA）模式可能并非最优选择。多页面应用（MPA）能够为每个页面提供独立的 HTML 入口，从而优化首屏加载速度并简化部署。本教程将指导你使用 Vite 这一现代构建工具，为 Vue 项目配置多页面应用。前置环境要求包括熟悉命令行，并已安装 ^20.19.0 || >=22.12.0 版本的 Node.js。
核心概念与原理
Vue.js 是一个渐进式 JavaScript 框架，其核心库专注于视图层，这使得它能够轻松集成到现有项目中。在 MPA 模式下，Vite 会为每个配置的页面生成一个独立的 HTML 文件，并处理相应的 JavaScript 和 CSS 依赖。这不同于 SPA 的单一入口，MPA 的每个页面都拥有完整的 HTML 结构，更利于 SEO 和独立部署。
实战步骤与代码
首先，确保你的 Node.js 版本符合要求，然后在命令行中运行以下命令来创建一个新的 Vue 项目：
npm create vue@latest在交互式提示中，你可以根据需求选择是否启用 TypeScript、Vue Router 等功能。项目创建后，我们需要修改 Vite 配置文件来实现多页面构建。以下是一个 vite.config.js 的配置示例：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({ plugins: [vue()], build: { rollupOptions: { input: { // 定义多页面入口 main: resolve(__dirname, 'index.html'), about: resolve(__dirname, 'about.html'), contact: resolve(__dirname, 'contact.html') } } } })
接下来，在项目根目录下创建对应的 HTML 文件，并在每个 HTML 文件中引入各自的入口 JavaScript 文件。例如，about.html 文件内容可能如下：
<!-- about.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于我们</title> </head> <body> <div id="app"></div> <script type="module" src="/src/about.js"></script> </body> </html>然后，在 src 目录下创建对应的入口文件，如 about.js，并在其中创建并挂载 Vue 应用实例。
常见坑点与优化
在配置过程中，一个常见的坑点是忘记在 rollupOptions.input 中配置所有页面入口，导致构建时遗漏部分页面。此外，页面间的公共资源（如公共组件、工具函数）应尽量提取，以减少重复代码。性能优化方面，可以考虑使用动态导入（import()）来按需加载非首屏需要的模块，从而减小每个页面的初始包体积。
评论列表 0