当前位置：首页 > news >正文

Vue3+Vite MPA多页面应用开发完整指南 – 从零搭建到部署优化

news 2025/8/19 11:19:51

什么是 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 pinia

Vite 配置文件

// 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"],},},},},
});