什么是 MPA 多頁面應用
MPA（Multi-Page Application）是由多個獨立的 HTML 頁面組成的應用，每個頁面都有獨立的入口文件。與 SPA 不同，MPA 的每個頁面都是獨立的，頁面間通過鏈接跳轉，適合大型項目或需要 SEO 優化的場景。
項目結構設計
vue3-vite-mpa/
├── src/
│ ├── pages/
│ │ ├── home/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── App.vue
│ │ ├── about/
│ │ │ ├── index.html
│ │ │ ├── main.js
│ │ │ └── App.vue
│ │ └── admin/
│ │ ├── index.html
│ │ ├── main.js
│ │ └── App.vue
│ ├── components/
│ │ ├── Header.vue
│ │ └── Footer.vue
│ └── assets/
├── package.json
└── vite.config.js基礎配置
安裝依賴
npm create vite@latest vue3-vite-mpa -- --template vue
cd vue3-vite-mpa
npm install vue-router@4 piniaVite 配置文件
// 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: {home: resolve(__dirname, "src/pages/home/index.html"),about: resolve(__dirname, "src/pages/about/index.html"),admin: resolve(__dirname, "src/pages/admin/index.html"),},},},resolve: {alias: {"@": resolve(__dirname, "src"),},},
});頁面開發示例
首頁 (Home)
<!-- src/pages/home/index.html -->
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>首頁 - Vue3 MPA</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body>
</html>// src/pages/home/main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "@/router";const app = createApp(App);
const pinia = createPinia();app.use(pinia);
app.use(router);
app.mount("#app");<!-- src/pages/home/App.vue -->
<template><div class="home"><Header /><main class="main-content"><h1>歡迎來到首頁</h1><p>這是一個Vue3 + Vite多頁面應用</p><div class="navigation"><router-link to="/about">關于我們</router-link><router-link to="/admin">管理后臺</router-link></div></main><Footer /></div>
</template><script setup>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
</script><style scoped>
.home {min-height: 100vh;display: flex;flex-direction: column;
}.main-content {flex: 1;padding: 2rem;text-align: center;
}.navigation a {margin: 0 1rem;padding: 0.5rem 1rem;background: #42b883;color: white;text-decoration: none;border-radius: 4px;
}
</style>共享組件
Header 組件
<!-- src/components/Header.vue -->
<template><header class="header"><nav class="nav"><div class="logo"><a href="/">Vue3 MPA</a></div><ul class="nav-links"><li><a href="/">首頁</a></li><li><a href="/about">關于</a></li><li><a href="/admin">管理</a></li></ul></nav></header>
</template><style scoped>
.header {background: #2c3e50;color: white;padding: 1rem 0;
}.nav {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;padding: 0 2rem;
}.logo a {color: white;text-decoration: none;font-size: 1.5rem;font-weight: bold;
}.nav-links {display: flex;list-style: none;gap: 2rem;
}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;
}.nav-links a:hover {color: #42b883;
}
</style>路由配置
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";const routes = [{path: "/",name: "Home",component: () => import("@/pages/home/App.vue"),},{path: "/about",name: "About",component: () => import("@/pages/about/App.vue"),},{path: "/admin",name: "Admin",component: () => import("@/pages/admin/App.vue"),},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;狀態管理
// src/stores/user.js
import { defineStore } from "pinia";export const useUserStore = defineStore("user", {state: () => ({user: null,isLoggedIn: false,}),actions: {login(userData) {this.user = userData;this.isLoggedIn = true;},logout() {this.user = null;this.isLoggedIn = false;},},
});構建和部署
# 開發模式
npm run dev# 生產構建
npm run build# 預覽構建結果
npm run preview性能優化
// vite.config.js 代碼分割配置
export default defineConfig({build: {rollupOptions: {input: {home: resolve(__dirname, "src/pages/home/index.html"),about: resolve(__dirname, "src/pages/about/index.html"),admin: resolve(__dirname, "src/pages/admin/index.html"),},output: {manualChunks: {vendor: ["vue", "vue-router"],utils: ["@/utils/common.js"],},},},},
});總結
Vue3+Vite MPA 多頁面應用開發提供了靈活的項目架構，適合大型項目或需要 SEO 的場景。通過合理的項目結構設計、組件復用、路由管理和狀態管理，可以構建出高性能、易維護的多頁面應用。
關鍵要點：
- 每個頁面獨立，便于開發和維護
- 共享組件和工具函數，提高代碼復用性
- 使用 Vite 的構建優化，提升開發和生產性能
- 合理的路由設計，提供良好的用戶體驗
?Vue3+Vite MPA多頁面應用開發完整指南 - 從零搭建到部署優化 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享
 Python + 地球信息科學與技術 = 經典案例分析)
