在多页面应用（MPA）中，每个页面有各自的 HTML 文件、JavaScript 文件和路由配置。每个页面独立加载，减少了初次加载的时间，适用于较大项目。相比单页面应用（SPA），MPA 的复杂度稍高，但更有利于 SEO 和页面性能优化。

下面我们将使用 Vue.js 实现一个完整的多页面应用示例，包含以下功能：

• 路由管理
• Vuex 状态管理
• Axios 请求
• 各个页面独立打包
• Webpack 或 Vite 进行多页面打包配置

项目结构

/src
  /pages
    /home
      Home.vue
      main.js
    /about
      About.vue
      main.js
  /components  # 公共组件
  /store       # Vuex store
  /router      # 路由配置
  /api         # API 请求
  /assets      # 静态资源
/vue.config.js # Vue CLI 配置文件

步骤 1：创建项目

首先，使用 Vue CLI 创建项目，并手动选择配置，确保选中了 Vue Router 和 Vuex：

vue create vue-mpa-example

选择 Manually select features，并确保启用了 Vue Router 和 Vuex。

步骤 2：配置多页面应用结构

在 /src 目录下创建多个页面文件夹，如 home 和 about。每个页面文件夹内都包含各自的 .vue 文件和 main.js 文件。

Home 页面结构

在 /src/pages/home/Home.vue 中创建首页视图：

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

在 /src/pages/home/main.js 中配置入口文件：

import Vue from 'vue';
import Home from './Home.vue';
import router from '@/router/home';
import store from '@/store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(Home)
}).$mount('#app');

About 页面结构

在 /src/pages/about/About.vue 中创建关于页面：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
    <router-link to="/">Go to Home Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

在 /src/pages/about/main.js 中配置入口文件：

import Vue from 'vue';
import About from './About.vue';
import router from '@/router/about';
import store from '@/store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(About)
}).$mount('#app');

步骤 3：配置路由

为每个页面设置独立的路由文件，在 /src/router/home.js 中配置首页路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/pages/home/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'Home', component: Home }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在 /src/router/about.js 中配置关于页面路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import About from '@/pages/about/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', name: 'About', component: About }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

步骤 4：配置 Vuex

为了在所有页面中共享状态，Vuex store 依旧是全局的。创建 /src/store/index.js 文件：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex!',
    users: []
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users;
    }
  },
  actions: {
    fetchUsers({ commit }) {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          commit('SET_USERS', response.data);
        });
    }
  }
});

步骤 5：配置 Webpack 多页面打包

在 /vue.config.js 中添加多页面配置：

module.exports = {
  pages: {
    home: {
      entry: 'src/pages/home/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Home Page'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/index.html',
      filename: 'about/index.html',
      title: 'About Page'
    }
  },
  configureWebpack: {
    // 配置代理，处理跨域
    devServer: {
      proxy: {
        '/api': {
          target: 'https://jsonplaceholder.typicode.com',
          changeOrigin: true
        }
      }
    }
  }
};

• pages: 指定多个入口文件。entry 为每个页面的主入口文件，filename 指定打包后的文件名，template 使用相同的 HTML 模板。
• devServer.proxy: 配置代理解决跨域问题。

步骤 6：创建 API 模块

在 /src/api/index.js 中配置 API 请求函数，使用 Axios 发送请求。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 10000
});

export function getUsers() {
  return apiClient.get('/users');
}

步骤 7：使用 Axios 和 Vuex 在 Home.vue 页面中展示数据

修改 /src/pages/home/Home.vue，通过 Vuex 获取用户列表并展示：

<template>
  <div>
    <h1>Home Page</h1>
    <p>{{ message }}</p>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
    users() {
      return this.$store.state.users;
    }
  },
  created() {
    this.$store.dispatch('fetchUsers');
  }
};
</script>

步骤 8：运行项目

运行以下命令启动项目：

npm run serve

此时，你可以在浏览器中访问：

• http://localhost:8080/ 查看首页
• http://localhost:8080/about 查看关于页面

多页面应用的特点

• 页面独立加载：每个页面有独立的路由、入口文件和组件，用户访问时只加载当前页面所需的资源，减少了初次加载的时间。
• 路由管理：通过 Vue Router 管理不同页面的路由，每个页面有独立的路由配置。
• 全局状态管理：即便是多页面应用，Vuex 依然可以全局管理应用的状态，确保不同页面之间可以共享数据。
• Axios 请求：通过 Axios 与后端进行异步请求，使用 Vuex 管理请求结果，方便在页面中进行展示。

总结

这个多页面应用项目展示了如何在 Vue 中构建一个简单的 MPA 应用，并集成了路由管理、Vuex 状态管理和 Axios 请求。通过 Webpack 或 Vite 的多页面打包配置，应用的每个页面都能独立运行，适用于较大项目的多页面需求。

你可以根据需要进一步扩展这个项目，添加如表单处理、用户认证、分页等功能。