在多页面应用（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 的多页面打包配置，应用的每个页面都能独立运行，适用于较大项目的多页面需求。
你可以根据需要进一步扩展这个项目，添加如表单处理、用户认证、分页等功能。