Vue3+Vite MPA多页面应用开发完整指南 - 从零搭建到部署优化 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享

什么是 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"],
        },
      },
    },
  },
});

总结

Vue3+Vite MPA 多页面应用开发提供了灵活的项目架构，适合大型项目或需要 SEO 的场景。通过合理的项目结构设计、组件复用、路由管理和状态管理，可以构建出高性能、易维护的多页面应用。

关键要点：

每个页面独立，便于开发和维护
共享组件和工具函数，提高代码复用性
使用 Vite 的构建优化，提升开发和生产性能
合理的路由设计，提供良好的用户体验

原文链接：https://code.ifrontend.net/archives/1041，转载请注明出处。

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

什么是 MPA 多页面应用

项目结构设计

基础配置

安装依赖

Vite 配置文件

页面开发示例

首页 (Home)

共享组件

Header 组件

路由配置

状态管理

构建和部署

性能优化

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

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

什么是 MPA 多页面应用

项目结构设计

基础配置

安装依赖

Vite 配置文件

页面开发示例

首页 (Home)

共享组件

Header 组件

路由配置

状态管理

构建和部署

性能优化

总结

猜你喜欢

Vitest 测试框架完全指南 – 极速单元测试解决方案

Vite Rolldown 完全指南：基于 Rust 的新一代打包器，性能提升 10 倍！

Mitt 事件发射器完全指南：200字节的轻量级解决方案

WebSocket DevTools 开发调试工具完全指南 – 实时监控、消息拦截、性能分析一站式解决方案

Vue 3.5+ Teleport defer 属性详解：解决组件渲染顺序问题的终极方案

Vue 3.5重磅更新：响应式Props解构，让组件开发更简洁高效

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部